CSS中的选择器（一）

API文档：http://css.cuishifeng.cn/all.html

1. 通配选择符(*)

语法：

　　* { sRules }

说明：

　　通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用

兼容性：

　　IE6及更早浏览器并不支持通配选择符(*)，而是将它忽略了，所以也变相的能看到效果。

2. 类型选择符(E)

语法：

　　E { sRules }

3. ID选择符(E#id)

语法：

　　E#myid { sRules }

4. 类选择符(E.class)

语法：

　　E.myclass { sRules }

说明：

　　不同于ID选择符的唯一性，类选择符可以同时定义多个。

　　.a.b { color: #f00; }

兼容性：

　　IE6不支持多类选择符，形如：.a.b {}

5. 包含选择符(E F)

语法：

　　E F { sRules }

说明：

　　选择所有被E元素包含的F元素。

6. 子选择符(E>F)

语法：

　　E>F { sRules }

说明：

　　选择所有作为E元素的子元素F。

　　与 包含选择符(E F) 不同的是，子选择符只能命中子元素，而不能命中孙辈。

<div class="demo">
　　<div class="a">
　　　　<div class="b">子选择符</div>
　　</div>
</div>
.demo > div { position: relative; }
此例只有 .a 会被命中，因为它是 .demo 的子元素；

兼容性：

　　IE6不支持

7. 相邻选择符(E+F)

语法：

　　E+F { sRules }

说明：

　　选择紧贴在E元素之后F元素，元素E与F必须同属一个父级。

兼容性：

　　IE6不支持

8. 兄弟选择符(E~F)

语法：

　　E~F { sRules }

说明：

　　选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。

　　需要注意的是，选择的只是同级的元素F，后代中的元素F不会被选择。

兼容性：

　　IE6不支持

9. E:link

语法：

　　E:link { sRules }

说明：

　　设置超链接a在未被访问前的样式。

　　如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现。超链接的4种状态，需要有特定的书写顺序才能生效。

　　a:link {} a:visited {} a:hover {} a:active {}

　　注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后

　　可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

兼容性：

　　IE7及更早浏览器只支持a元素的:active，从IE8开始支持其它元素的:active。

10. E:focus

语法：

　　E:focus { sRules }

说明：

　　设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。

　　webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

兼容性：

　　IE7及以下不兼容

11. E:first-child

语法：

　　E:first-child { sRules }

说明：

　　匹配父元素的第一个子元素E。

　　要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

12. E[att]

语法：

　　E[att] { sRules }

说明：

　　选择具有att属性的E元素。

兼容性：

　　IE6不兼容

13. E[att="val"]

语法：

　　E[att="val"] { sRules }

说明：

　　择具有att属性且属性值等于val的E元素。

兼容性：

　　IE6不兼容

14. E[att~="val"]

语法：

　　E[att~="val"] { sRules }

说明：

　　选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。

兼容性：

　　IE6不兼容

15. E[att^="val"]

语法：

　　E[att^="val"] { sRules }

说明：

　　选择具有att属性且属性值为以val开头的字符串的E元素。

兼容性：

　　IE6不兼容

16. E[att$="val"]

语法：

　　E[att$="val"] { sRules }

说明：

　　选择具有att属性且属性值为以val结尾的字符串的E元素。

兼容性：

　　IE6不兼容

17. E[att*="val"]

语法：

　　E[att*="val"] { sRules }

说明：

　　选择具有att属性且属性值为包含val的字符串的E元素。

兼容性：

　　IE6不兼容

18. E[att|="val"]

语法：

　　E[att|="val"] { sRules }

说明：

　　选择具有att属性，其值是以val开头并用连接符"-"分隔的字符串的E元素；如果值仅为val，也将被选择。

　　这样理解会更简单：如果元素E拥有att属性，并且值为val，或者值是以val-开头的，那么E将会被选择。

兼容性：

　　IE6不兼容