CSS選擇器4是下一代CSS選擇器規範

 

那麼，這一版本的新東西有哪些呢？

選擇器配置文件

CSS選擇器分爲兩類：快速選擇器和完整選擇器。快速選擇器適用於動態CSS引擎。完整選擇器適用於速度不佔關鍵因素的狀況，例如document.querySelector。

選擇器上下文不一樣，發揮的做用不一樣。一些功能強大的選擇器很遺憾太慢了，不能切實地適應高性能環境。要作到這一點，須要在選擇器規範裏定義兩個配置文件[參見]。

:HAS

:has選擇器是第四代選擇器中最有趣的部分，但它有個重要的警告，下面會描述。它能讓你改變選擇器的選擇對象，即實際將被賦予樣式的特定元素，同時它還會繼續和後文中出現的元素進行匹配。它開闢了許多匹配上下文的新方法。例如，匹配一個header：

1 2	// 有一個頭元素的任何部分 section:has(h 1 , h 2 , h 3 , h 4 , h 5 , h 6 )

或者開發人員能夠匹配只包含必定數量圖片的段落：

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( 2 n of [disabled])

:NOT()

你可能已經用了:not一段時間，你能夠經過傳遞多個參數來節省大小和手工輸入。

1 2 3

// 至關於： //    :not(h 1 ):not(h 2 ):not(h 3 )... :not(h 1 , h 2 , h 3 , h 4 , h 5 , h 6 )

後代結合符（>>）

早期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讓我知道。