歡迎光臨
每天分享高質量文章

CSS選擇器 4 中包括了哪些新東西?

是下一代CSS選擇器規範,上一個版本在起草多年後於2011年提出。

那麼,這一版本的新東西有哪些呢?

選擇器配置檔案

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

選擇器背景關係不同,發揮的作用不同。一些功能強大的選擇器很遺憾太慢了,不能切實地適應高效能環境。要做到這一點,需要在選擇器規範裡定義兩個配置檔案[參見]。

:HAS

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

// 有一個頭元素的任何部分

section:has(h1, h2, h3, h4, h5, h6)

或者開發人員可以匹配只包含一定數量圖片的段落:

// 側邊欄和五個子類

div.sidebar

:has(*:nth-child(5))       // 擁有第5個子類

:not(:has(*:nth-child(6))) // 但不具有第6個子類

甚至可以匹配包含特定子類數量的元素(本例有5個):

// 匹配一個全是影象的段落

:has(img)             // 擁有一個影象

:not(:has(:not(img))) //所有內容均是影象

警告:此時:has選擇器並沒有想象中的快速,這表明它不能在樣式表中使用。由於目前還沒有人實現這個選擇器,它的效能特徵還尚待研究。如果瀏覽器跟得上的話,它很快就能用於一般樣式了。

早期版本的規範會在主題旁新增一個感嘆號(!)表示警告,不過現在沒有了。

:MATCHES

:matches是:moz-andy和:webkit-any的標準化選擇器,已經與瀏覽器字首共存了一段時間。它允許樣式表的建立人員刪除重覆的規則路徑。

它的用處是,對一個類似笛卡爾積(Cartesian-product-esque)的SCSS/SASS輸出進行整理,比如下麵這段:

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) {

....

}

可以輸出為下麵這種更便於維護的樣式:

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自世紀之交就已經存在,但第四代選擇器在此基礎上增添了一個過濾功能:

div :nth-child(2 of .widget)

選擇器S用於確定索引,它獨立於偽類左邊的選擇器。如規範中提到的,如果你提前知道了元素的的型別,就可以將:nth-of-type選擇器轉化為:nth-child(… of S),如:

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中的父級選擇器的話,你可能會意外地漏掉一些東西。例如:

tr:nth-child(2n of [disabled])

:NOT()

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

// 相當於:

//    :not(h1):not(h2):not(h3)...

:not(h1, h2, h3, h4, h5, h6)

後代結合符(>>)

早期CSS中,後代選擇符的作用是一段()空間,不過現在作用更加明顯:

// 相當於:

//    p img { ... }

p >> img { ... }

這樣做是為了聯絡直接後代(>)和shadow DOM(>>>)運運算元。

列結合符(||)和:NTH-COLUMN

CSS4增加了列操作功能,這樣開發人員就能更簡便地在表格裡對單獨的列進行設計。目前設計表格需要使用 :nth-child,如此一來就不需要使用colspan 屬性來匹配表格的列。

透過使用新的列組合符(||),你可以用

標記表中的相同列,然後對該列中的單元格進行設計:

// 下麵的例子使單元格C,E,G為黃色。

// 例子來源於CSS選擇器4規範

col.selected || td {

background: yellow;

color: white;

font-weight: bold;

}

另外,樣式表設計人員還可以用:nth-column和:nth-last-column來設計單元格。

這兩種情況下,如果一個單元格橫跨多列,它可以匹配這些列中任意一個選擇器。

: PLACEHOLDER-SHOWN

選擇器規範裡還添了一個:placeholder-shown,當且僅當placeholder 屬性文字可見時,它將會匹配一個輸入的元素。

:ANY-LINK

另一個小小的改變就是:any-link,它的作用就是匹配任何:link和:visited可匹配的內容。

// 相當於:

//    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日

原文出處:grack.com

譯文出處:伯樂線上 - 木木的喬安娜

A B C
D E
F G
贊(0)

分享創造快樂