CSS選擇器4是下一代CSS選擇器規範，上一個版本在起草多年後於2011年提出。
那麼，這一版本的新東西有哪些呢？
選擇器配置檔案
CSS選擇器分為兩類：快速選擇器和完整選擇器。快速選擇器適用於動態CSS引擎。完整選擇器適用於速度不佔關鍵因素的情況，例如document.querySelector。
選擇器上下文不同，發揮的作用不同。一些功能強大的選擇器很遺憾太慢了，不能切實地適應高效能環境。要做到這一點，需要在選擇器規範裡定義兩個配置檔案[參見]。
:HAS
:has選擇器是第四代選擇器中最有趣的部分，但它有個重要的警告，下面會描述。它能讓你改變選擇器的選擇物件，即實際將被賦予樣式的特定元素，同時它還會繼續和後文中出現的元素進行匹配。它開闢了許多匹配上下文的新方法。例如，匹配一個header：
|
1 2 |
// 有一個頭元素的任何部分 section:has(h1, h2, h3, h4, h5, h6) |
或者開發人員可以匹配只包含一定數量圖片的段落：
|
1 2 3 4 |
// 側邊欄和五個子類 div.sidebar :has(*:nth-child(5)) // 擁有第5個子類 :not(:has(*:nth-child(6))) // 但不具有第6個子類 |
甚至可以匹配包含特定子類數量的元素（本例有5個）：
|
1 2 3 |
// 匹配一個全是影像的段落 :has(img) // 擁有一個影像 :not(:has(:not(img))) //所有內容均是影像 |
警告：此時:has選擇器並沒有想象中的快速，這表明它不能在樣式表中使用。由於目前還沒有人實現這個選擇器，它的效能特徵還尚待研究。如果瀏覽器跟得上的話，它很快就能用於一般樣式了。
早期版本的規範會在主題旁新增一個感嘆號（！）表示警告，不過現在沒有了。
:MATCHES
:matches是:moz-andy和:webkit-any的標準化選擇器，已經與瀏覽器字首共存了一段時間。它允許樣式表的建立人員刪除重複的規則路徑。
它的用處是，對一個類似笛卡爾積（Cartesian-product-esque）的SCSS/SASS輸出進行整理，比如下面這段：
|
1 2 3 4 5 6 7 8 9 10 |
body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) { .... } |
可以輸出為下面這種更便於維護的樣式：
|
1 2 3 4 5 6 7 |
body > .layout > .body > .content :matches(.post, .page) :matches(p, li) :matches(a.image.standard:first-child:nth-last-child(4), a.image.standard:first-child:nth-last-child(4) ~ a.image.standard), .... } |
上述Mozilla的參考頁列出了有關效能的一些注意事項。既然這個選擇器致力於成為標準，我們希望能看到更多有關效能方面的工作，使之更輕便。
:NTH-CHILD(AN+B [OF S])
雖然:nth-of-typey自世紀之交就已經存在，但第四代選擇器在此基礎上增添了一個過濾功能：
|
1 |
div :nth-child(2 of .widget) |
選擇器S用於確定索引，它獨立於偽類左邊的選擇器。如規範中提到的，如果你提前知道了元素的的型別，就可以將:nth-of-type選擇器轉化為:nth-child(… of S)，如：
|
1 |
img:nth-of-type(2) => :nth-child(2 of img) |
這個選擇器和:nth-of-type的區別是微妙但重要的。對於:nth-of-type，無論是否給一個元素新增了選擇器，它都會對有相同標記的內容加入隱式索引。每當你使用一個新的選擇器，:nth-child(n of S)就會使計數器加1.
這個選擇器有潛在的缺陷。因為：nth-child 偽類中的選擇器是獨立於其左邊的選擇器的，如果你在左邊制定一個非:nth-child中的父級選擇器的話，你可能會意外地漏掉一些東西。例如：
|
1 |
tr:nth-child(2n of [disabled]) |
:NOT()
你可能已經用了:not一段時間，你可以通過傳遞多個引數來節省大小和手工輸入。
|
1 2 3 |
// 相當於： // :not(h1):not(h2):not(h3)... :not(h1, h2, h3, h4, h5, h6) |
後代結合符（>>）
早期CSS中，後代選擇符的作用是一段()空間，不過現在作用更加明顯：
|
1 2 3 |
// 相當於： // p img { ... } p >> img { ... } |
這樣做是為了聯絡直接後代(>)和shadow DOM(>>>)操作符。
列結合符(||)和:NTH-COLUMN
CSS4增加了列操作功能，這樣開發人員就能更簡便地在表格裡對單獨的列進行設計。目前設計表格需要使用 :nth-child，如此一來就不需要使用colspan 屬性來匹配表格的列。
通過使用新的列組合符（||），你可以用<col>標記表中的相同列，然後對該列中的單元格進行設計：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 下面的例子使單元格C,E,G為黃色。 // 例子來源於CSS選擇器4規範 col.selected || td { background: yellow; color: white; font-weight: bold; } <table> <col span="2"> <col class="selected"> <tr><td>A <td>B <td>C <tr><td colspan="2">D <td>E <tr><td>F <td colspan="2">G </table> |
另外，樣式表設計人員還可以用:nth-column和:nth-last-column來設計單元格。
這兩種情況下，如果一個單元格橫跨多列，它可以匹配這些列中任意一個選擇器。
: PLACEHOLDER-SHOWN
選擇器規範裡還添了一個:placeholder-shown，當且僅當placeholder 屬性文字可見時，它將會匹配一個輸入的元素。
:ANY-LINK
另一個小小的改變就是:any-link，它的作用就是匹配任何:link和:visited可匹配的內容。
|
1 2 3 |
// 相當於： // a:link, a:visited { ... } a:any-link { ... } |
結論
CSS4中的選擇器尚在研究之中，不過我們看到，已有很多有用的選擇器為開發人員提供了新的模式和工具，方便他們的設計。規範中也有其他新的選擇器，他們的訪問、有效性檢驗和樣式範圍界定等概念文中並沒有提到。
如果你想試驗一下這些選擇器，你得等到可相容的瀏覽器出現，或是嘗試一下早期的版本，如:moz-any和:webkit-any的作用和:matches就相同，WebKit早期就支援:nth-child選擇器。
因為這是筆者的草案，偽類的名字可能會發生改變。要獲取更多內容，請留意CSS 4選擇器規範。
如有建議可在Twitter 上 @mmastrac讓我知道。
相關文章
- 使用CSS3的:nth-child發明新的選擇器 2015年1月9日
- 我們為何滿意AppEngine(而非其他) 2010年11月23日
- PubSubHubbub vs. rssCloud 2009年9月7日
- Fedora Core 3：在chroot監禁環境下執行CVS 2004年11月14日