以下內容參考資源：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的選擇器中早就包含了，所以就不多說了。
瀏覽器兼容性：
 |
 |
 |
 |
 |
|
|
|
|
|
連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/
瀏覽器兼容性
|
|
|
|
|
|
|
|
|
|
注：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)
瀏覽器兼容性
|
|
|
|
|
|
|
|
|
|
how old are IE6/7/8???
目標偽類選擇器
新增目標偽類選擇器：
E:target：匹配URI中錨點指定的元素
這個有點繞，什么意思呢？例如頁面上有個id為test的DIV，然后在URI中有#test的話，就會給id為test的DIV加上定義的樣式。
瀏覽器兼容性
|
|
|
|
|
|
|
|
|
|
how old are IE6/7/8???
否定偽類選擇器
新增否定偽類選擇器：
E:not(s)：匹配類型為E，不匹配選擇符為 s 的元素。
瀏覽器兼容性
|
|
|
|
|
|
|
|
|
|
FireFox現在都已經14+版了，主要還是IE的問題，有選擇地用吧。
通用兄弟元素選擇器
新增通用兄弟元素選擇器
E~F：匹配位於E元素后面的F元素
注意，E和F是兄弟元素。
瀏覽器兼容性
|
|
|
|
|
|
|
|
|
|
兼容性不錯，可以大方地使用。
綜合示例
測試代碼：
<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實戰一書》，由於我機器上的瀏覽器版本都比較新，比較老的版本未一一進行測試，如果有誤請大家指正，不勝感激。