CSS3实战之新增的选择器

用的比较少 看到知道怎么回事就ok

 

http://www.w3.org/TR/css3-selectors/#selectors

http://www.cnblogs.com/jscode/archive/2012/07/30/2615748.html

新增选择器列表：

　　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元素