CSS3实战之新增的选择器

　　以下内容参考资源：http://www.w3.org/TR/css3-selectors/#selectors

属性选择器

新增选择器列表：

　　E[foo^="bar"]：匹配foo属性值以"bar"开始的E元素

　　E[foo$="bar"]：匹配foo属性值以"bar"结束的E元素

　　E[foo*="bar"]：匹配foo属性值包含"bar"的E元素

　　这几个选择器很简单，其实在jQuery的选择器中早就包含了，所以就不多说了。

浏览器兼容性：

IE 6 IE 7 IE 8 IE 9	Chrome 1.0.x Chrome 2.0.x Chrome 3.0.x Chrome 4.0.x	FireFox 1.5 FireFox 2.0 FireFox 3.0 FireFox 3.5	Opera 9.0 Opera 9.6 Opera 10.0 Opera 10.5	Safari 3.1 Safari 4.0

　　连IE7、8都提供了支持，IE6正逐渐被淘汰，所以放心地用吧。

结构伪类选择器

新增结构伪类选择器列表：

　　E:root：匹配E所在文档的根元素

　　E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

　　E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）

　　E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素

　　E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）

　　E:first-of-type：匹配父元素的第一个类型为E的子元素

　　E:last-child：匹配元素类型为E且是父元素的最后一个子元素

　　E:last-of-type：匹配父元素的最后一个类型为E的子元素

　　E:only-child：匹配元素类型为E且是父元素中唯一的子元素

　　E:only-of-type：匹配父元素中唯一子元素是E的子元素

　　E:empty：匹配不包含子节点(包括文本)的E元素

　　这几个选择器平时用的比较少，其中 -child(n) 跟 -of-type(n) 很容易混淆，下面就以 nth-child(n) 与 nth-of-type(n) 为例，说明一下区别：

<style type="text/css">
p:nth-child(2){color:red;}
p:nth-of-type(2){border:1px solid #000;}
</style>
<div id="test">
<p>P One</p>
<p>P Two</p>
</div>
<div id="test">
<span>Span Test</span>
<p>P One</p>
<p>P Two</p>
</div>

　　运行结果如下：

　　我们可以看到，:nth-child(n) 表示，选择满足以下条件的元素：1、是一个p元素，2. 是父元素的第n个子元素。

　　:nth-of-type(n) 表示：选择父元素的第n个子元素p

　　不知道大家看到这里明白没，如果还没弄明白请看原文：http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

浏览器兼容性

IE 6 IE 7 IE 8 IE 9	Chrome 1.0.x Chrome 2.0.x Chrome 3.0.x Chrome 4.0.x	FireFox 1.5 FireFox 2.0 FireFox 3.0 FireFox 3.5	Opera 9.0 Opera 9.6 Opera 10.0 Opera 10.5	Safari 3.1 Safari 4.0

　　注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。

　　由于IE6/7/8不支持，没办法，选择合适的场合用吧。

UI元素状态伪类选择器

新增的UI元素状态伪类选择器列表：

　　E:enabled：选择所有可用的E元素

　　E:disabled：选择所有不可用的E元素

　　E:checked：选择所有选中的E元素(主要用于checkbox和radio-button)

浏览器兼容性

IE 6 IE 7 IE 8 IE 9	Chrome 1.0.x Chrome 2.0.x Chrome 3.0.x Chrome 4.0.x	FireFox 1.5 FireFox 2.0 FireFox 3.0 FireFox 3.5	Opera 9.0 Opera 9.6 Opera 10.0 Opera 10.5	Safari 3.1 Safari 4.0

　　how old are IE6/7/8???

目标伪类选择器

新增目标伪类选择器：

　　E:target：匹配URI中锚点指定的元素

　　这个有点绕，什么意思呢？例如页面上有个id为test的DIV，然后在URI中有#test的话，就会给id为test的DIV加上定义的样式。

浏览器兼容性

IE 6 IE 7 IE 8 IE 9	Chrome 1.0.x Chrome 2.0.x Chrome 3.0.x Chrome 4.0.x	FireFox 1.5 FireFox 2.0 FireFox 3.0 FireFox 3.5	Opera 9.0 Opera 9.6 Opera 10.0 Opera 10.5	Safari 3.1 Safari 4.0

　　how old are IE6/7/8???

否定伪类选择器

新增否定伪类选择器：

　　E:not(s)：匹配类型为E，不匹配选择符为 s 的元素。

浏览器兼容性

IE 6 IE 7 IE 8 IE 9	Chrome 1.0.x Chrome 2.0.x Chrome 3.0.x Chrome 4.0.x	FireFox 1.5 FireFox 2.0 FireFox 3.0 FireFox 3.5	Opera 9.0 Opera 9.6 Opera 10.0 Opera 10.5	Safari 3.1 Safari 4.0

　　FireFox现在都已经14+版了，主要还是IE的问题，有选择地用吧。

通用兄弟元素选择器

新增通用兄弟元素选择器

　　E~F：匹配位于E元素后面的F元素

　　注意，E和F是兄弟元素。

浏览器兼容性

IE 6 IE 7 IE 8 IE 9	Chrome 1.0.x Chrome 2.0.x Chrome 3.0.x Chrome 4.0.x	FireFox 1.5 FireFox 2.0 FireFox 3.0 FireFox 3.5	Opera 9.0 Opera 9.6 Opera 10.0 Opera 10.5	Safari 3.1 Safari 4.0

　　兼容性不错，可以大方地使用。

综合示例

　　测试代码：

<style type="text/css">
li{padding:10px;}
input[name^="news"]{
border:1px solid #F60;
}
ol li:nth-child(3n+1){
background:#EEE;
}
ol li:nth-child(3n+2){
background:#666;
}
input:disabled{
background:#EEE;
}
div:target{
background:#F60;
}
ol~div{
margin:5px 0;
background:#EEE;
padding:10px;
}
div:not(#note){
margin:10px 0;
border:1px solid #CCC;
padding:10px;
border-radius:5px;
}
</style>
<input name="newsletter" value="name=newsletter" />
<input name="milkman" disabled="disabled" value="name=milkman"/>
<input name="newsboy" value="name=newsboy" />
<div id="webt">前端工程师要学习的内容主要有：</div>
<ol>
<li>JavaScript</li>
<li>CSS</li>
<li>HTML</li>
<li>Ajax</li>
<li>JSON</li>
<li>XML</li>
<li>jQuery</li>
</ol>
<div id="note">ol li:nth-child(3n+1)表示匹配索引（从1开始）为3n+1的li元素，n可取0、1、2、3...等。E:nth-child(n)中n还为odd（奇数）、even（偶数）</div>

　　运行效果：

　　注：文中浏览器兼容性测试参考了《CSS3实战一书》，由于我机器上的浏览器版本都比较新，比较老的版本未一一进行测试，如果有误请大家指正，不胜感激。