CSS系列：CSS3新增選擇器

1、屬性選擇器 新增選擇器列表：Efoo=bar：匹配foo屬性值以bar開(kāi)始的E元素Efoo$=bar：匹配foo屬性值以bar結(jié)束的E元素Efoo*=bar：匹配foo屬性值包含bar的E元素這幾個(gè)選擇器很簡(jiǎn)單，其實(shí)在jQuery的選擇器中早就包含了，所以就不多說(shuō)了。瀏覽器兼容性： 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 1

2、0.5 Safari 3.1 Safari 4.0連IE7、8都提供了支持，IE6正逐漸被淘汰，所以放心地用吧。結(jié)構(gòu)偽類選擇器新增結(jié)構(gòu)偽類選擇器列表：E:root：匹配E所在文檔的根元素E:nth-child(n)：匹配元素類型為E且是父元素的第n個(gè)子元素E:nth-last-child(n)：匹配元素類型為E且是父元素的倒數(shù)第n個(gè)子元素（與上一項(xiàng)順序相反）E:nth-of-type(n)：匹配父元素的第n個(gè)類型為E的子元素E:nth-last-of-type(n)：匹配父元素的倒數(shù)第n個(gè)類型為E的子元素（與上一項(xiàng)順序相反）E:first-of-type：匹配父元素的第一個(gè)類型為E的子元素E:

3、last-child：匹配元素類型為E且是父元素的最后一個(gè)子元素E:last-of-type：匹配父元素的最后一個(gè)類型為E的子元素E:only-child：匹配元素類型為E且是父元素中唯一的子元素E:only-of-type：匹配父元素中唯一子元素是E的子元素E:empty：匹配不包含子節(jié)點(diǎn)(包括文本)的E元素這幾個(gè)選擇器平時(shí)用的比較少，其中 -child(n) 跟 -of-type(n) 很容易混淆，下面就以 nth-child(n) 與 nth-of-type(n) 為例，說(shuō)明一下區(qū)別： p:nth-child(2)color:red; p:nth-of-type(2)border:1px

4、 solid #000; P One P Two Span Test P One P Two運(yùn)行結(jié)果如下：我們可以看到，:nth-child(n) 表示，選擇滿足以下條件的元素：1、是一個(gè)p元素，2. 是父元素的第n個(gè)子元素。:nth-of-type(n) 表示：選擇父元素的第n個(gè)子元素p不知道大家看到這里明白沒(méi)，如果還沒(méi)弄明白請(qǐng)看原文：http:/css-瀏覽器兼容性 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 FireF

5、ox 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，F(xiàn)ireFox 3.0支持E:last-child、E:only-child、E:empty。由于IE6/7/8不支持，沒(méi)辦法，選擇合適的場(chǎng)合用吧。UI元素狀態(tài)偽類選擇器新增的UI元素狀態(tài)偽類選擇器列表：E:enabled：選擇所有可用的E元素E:disabled：選擇所有不可用的E元素E:checked：選擇所有選中的E元素(主要用于checkbox和radio-button)瀏覽器兼容性 IE

6、 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?目標(biāo)偽類選擇器新增目標(biāo)偽類選擇器：E:target：匹配URI中錨點(diǎn)指定的元素這個(gè)有點(diǎn)繞，什么意思呢？例如頁(yè)面上有個(gè)id為test的DIV，然后在URI中有#test的話，就會(huì)給id為test的DI

7、V加上定義的樣式。瀏覽器兼容性 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

8、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現(xiàn)在都已經(jīng)14+版了，主要還是IE的問(wèn)題，有選擇地用吧。通用兄弟元素選擇器新增通用兄弟元素選擇器EF：匹配位于E元素后面的F元素注意，E和F是兄弟元素。瀏覽器兼容性 IE 6 IE 7 IE 8 IE 9 Chrome 1.0.x Chrome 2.0.x Chrome 3

9、.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兼容性不錯(cuò)，可以大方地使用。綜合示例測(cè)試代碼：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;前