CSS系列：CSS3新增选择器.doc

CSS系列：CSS3新增选择器 属性选择器新增选择器列表：Efoo=bar：匹配foo属性值以bar开始的E元素Efoo$=bar：匹配foo属性值以bar结束的E元素Efoo*=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) 为例，说明一下区别： p:nth-child(2)color:red; p:nth-of-type(2)border:1px solid #000; P One P Two Span Test P One P Two运行结果如下：我们可以看到，:nth-child(n) 表示，选择满足以下条件的元素：1、是一个p元素，2. 是父元素的第n个子元素。:nth-of-type(n) 表示：选择父元素的第n个子元素p不知道大家看到这里明白没，如果还没弄明白请看原文：/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.0how 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.0how 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.0FireFox现在都已经14+版了，主要还是IE的问题，有选择地用吧。通用兄弟元素选择器新增通用兄弟元素选择器EF：匹配位于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兼容性不错，可以大方地使用。综合示例测试代码：lipadding:10px;inputname=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;oldiv margin:5px 0; background:#EEE; padding:10px;div:not(#note) margin:10px 0; border:1px solid #CCC; padding:10px; border-radius:5px;前端工程师要学习的内容主要有： JavaScript CSS HTML Ajax JSON XML jQueryol li:nth-child(3n+1)表示匹配索引（从1开始）为3n+1的li