[譯]CSS 第四級選擇器

CSS 第四級選擇器

譯文出自：閃電礦工翻譯組

原文地址: CSS selectors level 4

原文做者: Esteban Herrera

倉庫原文連接：issue

譯者: thisang

選擇器是 CSS 的核心部分。你用來作一些操做好比說選擇某種類型的全部元素，就像下面這樣：

div {
  /* 一些應用在全部 div 元素上的樣式 */
}
複製代碼

或者你能夠選擇一個在它的父元素下的最後一個子元素：

ul li:last-child {
  /* 一些只應用在列表的最後一個子元素上的樣式 */
}
複製代碼

固然，你也能夠去作一些更復雜的事情，好比說選擇選擇列表中除了最後一個子元素以外的全部子元素。

事實上，這樣作的方法不止一種，一些方法甚至更復雜。

例如，比較如下這兩個：

ul li {
  /* 一些應用在全部子元素上的樣式 */
}
ul li:last-child {
  /* 一些樣式用來重置上面生效的樣式，由於上面的樣式不適用於上面最後一個子元素 */
}
複製代碼

ui li:nth-last-child(n+2) {
  /* 一些應用在除了最後一個子元素以外的全部子元素上面的樣式 */
}
複製代碼

ul li屬於第一級選擇器。

last-child和nth-last-child屬於第三級選擇器。

你能夠把級別看做是 CSS 選擇器的版本，其中每一個級別都會添加一些功能更強大的選擇器。

在這篇文章中，我會根據截至 2019 年 1 月的草案規範，和你一塊兒過一遍下一代選擇器（第四級），主要有如下分類：

• 邏輯組合
• 屬性選擇器
• 語言僞類
• 位置僞類
• 用戶操做僞類
• 輸入僞類
• 樹結構僞類
• 網格結構僞類

在我寫這篇文章的時候，第四級選擇器的規範還處於草案階段。直到官方推薦以前，它可能還會改，並且你可能還會發現不少選擇器甚至都尚未被一些瀏覽器支持或者須要添加一些前綴（:-moz-或:-webkit-）。

對於每個選擇器，我都會提供一個can I use的連接以便你能夠看到哪些瀏覽器支持它（若是有的話）、一些簡短的介紹、一個例子、和一個 Codepen 的連接，這樣你就能本身去嘗試一下（即便它暫時沒法使用，由於未來可能會改）。

好了，讓咱們中邏輯組合選擇器開始。

邏輯組合選擇器

這個類別包括經過組合選擇其餘選擇器而起做用的選擇器。

:not(selector1,selector2,...)

瀏覽器支持

它選擇那些與傳入的參數不匹配的元素列表。例如：

p:not(.beginning, .middle){
  color: red;
}
複製代碼

這會給全部的沒有.beginning和.middle類的p元素設置顏色爲紅色的樣式。

這個選擇器的第三級版本只能容許一個選擇器，而不是兩個或更多的的選擇器。例如，上面的樣式能夠寫成：

p:not(.beginning):not(.middle){
  color: red;
}
複製代碼

在 Codepen 上試試

:is(selector1,selector2)

瀏覽器支持

它選擇那些與傳入的參數匹配的元素列表。例如：

p:is(.beginning, .middle){
  color: blur;
}
複製代碼

這會給全部的具備.beginning和.middle類的p元素設置顏色爲藍色的樣式。

自從上一個工做草案版本以來最重大的變化之一就是:matches()選擇器被改名爲:is()而且已經被 Safari（惟一一個徹底支持這個選擇器的瀏覽器）棄用，所以它和與之相反的選擇器:not()能夠更好的配對。

若是要向後兼容，能夠用:is()做爲:matches()的別名。

然而，:matches()之前叫作:any()，所以大多數瀏覽器都支持帶前綴的僞類：

p:-webkit-any(.beginning, .middle){
  color: blue;
}
p:-moz-any(.beginning, .middle) {
  color: blue;
}
複製代碼

在 Codepen 上試試

:where(selector1,selector,...)

在我寫這篇文章的時候，尚未任何一個瀏覽器支持這個選擇器。

它具備和:is()相同的語法和功能，可是無論這個選擇器接受多少個參數，這個選擇器的權重都是 0。

權重是 CSS 的應用規則。若是兩個選擇器同時應用在同一個元素上面，則權重高的那個生效。若是不一樣規則具備相同的權重，那麼應用在這個元素上的最後一個規則將會生效。

這個選擇器能夠用來實現篩選和覆蓋與之關聯的元素的樣式。

下面是一個權重的例子：

a:not(:hover) {
  text-decoration: none;
}
nav a {
  /* 不會生效 */
  text-decoration: underline;
}
/* 使用新的第四級選擇器 :where */
a:where(:not(:hover)) {
  text-decoration: none;
}
nav a{
  /* 生效 */
  text-decoration: underline;
}
複製代碼

在 Codepen 上試試

:has(reslativeSelector1,reslativeSelector2,...)

瀏覽器支持（在寫這篇文章的時候，尚未任何一個瀏覽器支持這個選擇器）

這個選擇器將一個相對選擇器列表做爲參數。它選擇那些在指定範圍內匹配相對選擇器列表的元素。

例如：

p:has(strong, em) {
  color: red;
}
複製代碼

這會給全部的包含<strong>或者<em>元素的p元素添加一個顏色爲紅色的樣式。

在 Codepen 上試試

屬性選擇器

這類選擇器包含那些應用在元素屬性上的選擇器。

[foo="bar"i]

瀏覽器支持

它選擇那些foo屬性的值等於bar的元素，忽略大小寫。

例如：

p[class="text" i] {
  color: green;
}
複製代碼

這會給全部的class屬性的值爲Text、TEXT、或者是text、又或者是其餘組合的p元素添加一個顏色爲綠色的樣式。

在 Codepen 上試試

[foo="bar"s]

在我寫這篇文章的時候，尚未任何一個瀏覽器支持這個選擇器。

它選擇那些foo屬性的值嚴格等於bar的元素。

例如：

p[class="text" s]{
  color: green;
}
複製代碼

這會給全部class屬性的值爲text（例如，不是Text）的p元素添加一個顏色爲綠色的樣式。

在 Codepen 上試試

語言僞類？

這類選擇器包括那些使用語言相關設置的選擇器。

:dir(ltr)

瀏覽器支持

它選擇那些具備從左到右方向性的元素，其中文檔語言指定如何肯定方向性。與之對應的：:dir(rtl)表示具備從右到左方向性的元素。其餘值是無效的也不會匹配任何元素。

例如：

p:dir(rtl) {
  background-color: red;
}
複製代碼

這會給設置了從左到右方向的p元素添加一個背景色爲紅色的樣式。

在 Codepen 上試試

:lang(zh,"*-hant")

瀏覽器支持

在我寫這篇文章的時候，尚未任何一個瀏覽器支持這個第四級選擇器。

它選擇那些被標記爲中文的元素（或者選擇其餘語言標記的元素，只須要把zh改成其餘的語言代碼就能夠了）或者用繁體字書寫的元素（或者在其餘字符的系統中，將-hant替換爲其它字符代碼）。

實際上，第二級選擇器裏面就有這個選擇器，可是在第四級選擇器裏面新增了通配符和逗號分隔列表。

它接收一個或多個以逗號爲分隔的語言代碼做爲參數。若是語言代碼裏面包含*，則必須對它們進行正確的轉義（:lang(es-\*)）或字符串引號（:lang("es-*")）。

例如：

p:lang("*-CH") {
  background-color: red;
}
複製代碼

這會給全部被標記爲使用瑞士語言的p元素添加一個背景色爲紅色的背景色。

在 Codepen 上試試

位置僞類

這類選擇器包括那些與超連接有關得選擇器。

:any-link

在Can I use上並無這個選擇器的兼容性介紹，可是大多數主流瀏覽器都支持這個選擇器。

它選擇那些具備href屬性的元素（例如<a>或<link>。或者說，全部與:link或:visited僞類匹配的元素。

例如：

a:any-link {
  color: red;
}
複製代碼

這會給全部具備href屬性的的全部a元素添加一個顏色爲紅色的樣式。

在 Codepen 上試試

:local-link

在我寫這篇文章的時候，尚未任何一個瀏覽器支持這個第四級選擇器。

它選擇那些連接到當前 URL 的元素。若是連接的指向包括 URL 片斷，則 URL 片斷和和當前 URL 也必需要匹配。好比不匹配，則在比較中不考慮當前 URL 的片斷 URL 部分。

例如：

a:local-link {
  text-decoration: none;
}
複製代碼

這會給全部的具備href屬性的指向當前頁面的a元素（也許它們是導航菜單的一部分）去掉下劃線。

在 Codepen 上試試

用戶操做僞類

這類選擇器包括那些用戶正在操做的元素的選擇器。

:focus-within

瀏覽器支持

它選擇那些與:focus僞類匹配的元素（當元素具備焦點時）或具備與:focus匹配的子元素。

例如，使用以下的一個表單：

<from>
  <input type="text" id="name" placeholder="Enter your name" />
</from>
複製代碼

當表單裏的輸入框得到焦點的時候，它會給表單添加一個邊框。

在 Codepen 上試試

:focus-visible

瀏覽器支持

它選擇一個處於焦點狀態的元素（與:focus僞類匹配），瀏覽器一般會爲了讓得到焦點的元素清晰可見，給它添加一個焦點環。

和:focus的區別和細微。

若是:focus-visible匹配了，:focus必定會匹配，可是反過來就不必定了，它取決於瀏覽器（若是啓用了聚焦環的繪製）和獲取焦點的元素（經過鼠標點擊或者 tab 鍵）。

Firefox 把這個選擇器實現爲:-moz-focusring僞類。

例如，在某些場景下，有如下樣式：

/* 標準第四級選擇器 */
:focus-visible {
  background-color: lightgary;
}
/* 基於 Firefox 的第四級選擇器 */
:moz-focusring {
  background-color: lightgary;
}
複製代碼

只有在元素經過 tab 得到焦點的時候纔會生效。

在 Codepen 上試試

輸入僞類

這類選擇包括那些應用於接受用戶輸入的元素的選擇器。

:read-write and :read-only

瀏覽器支持

:read-write選擇可讀可寫的元素（例如那些不具備 readonly屬性的<input>的元素）。

:read-only選擇那些只能讀的元素（例如具備readonly屬性的<input>的元素）。

然而，這些選擇器不只僅選擇<input>或<textarea>元素，它們也能夠選擇用戶能輸入的任何選擇，例如將contenteditable屬性設置爲true的<p>元素。

例如：

:read-write {
  background-color: lightyellow;
}

:read-only {
  background-color: lightgary;
}

/* Firefox */
:-moz-read-write {
  background-color: lightyellow;
}

:moz-read-only {
  background-color: lightgary;
}
複製代碼

這會把頁面上全部的不可編輯元素背景色設置爲淺灰色，把能夠編輯的元素的背景色設置爲淺黃色。

在 Codepen 上試試

:placeholder-shown

瀏覽器支持

它選擇一個當前正在顯示佔位符文本的輸入框元素。

例如：

input:placeholder-shown {
  color: red;
}
複製代碼

這會給當前顯示佔位符文本的input元素設置一個顏色爲紅色的樣式，注意這裏設置的只是光標的顏色。

在 Codepen 上試試

:default

瀏覽器支持

它選擇那些在一組相關元素裏面做爲默認選項的元素。一般用於按鈕和選擇列表 / 菜單。

例如：

input:default {
  box-shadow: 0 0 2px 2px green;
}

input:defaut + lable {
  color: green;
}
複製代碼

這會給默認<input>元素的標籤設置綠色陰影和顏色。

在 Codepen 上試試

:indeterminate

瀏覽器支持

它選擇那些處於不肯定狀態的元素。例如，單選框組和複選框組裏包含的那些未被選中的元素，或者進度百分比未知的進度條。

例如：

input[type="radio"]:indeterminate + label {
  color: red;
}
複製代碼

若是組中尚未任何一個元素被選，。這會給這個組的標籤添加一個顏色爲紅色的樣式。

在 Codepen 上試試

:valid 和 :invalid

瀏覽器支持

它選擇那些根據有效性語義或值的有效或無效的元素。若是沒有定義值的有效性規則，則這個元素既不知足:valid也不知足:invalid。

例如：對於一個輸入類型爲email的元素：

input:invalid {
  color: red;
}
input:valid {
  color: green;
}
複製代碼

這會根據元素裏面輸入的電子郵件是否有效爲依據去爲元素的文本設置不一樣顏色。

在 Codepen 上試試

:in-range 和 :out-of-range

瀏覽器支持

這些選擇器只適用於那些具備範圍限制的元素，例如，定義了最大最小值的元素。若是沒有定義，則都不匹配。

例如：一個設置了最小隻爲 1 最大值爲 5 的輸入框。

input:out-of-range {
  color: red;
}

input:in-range {
  color: green;
}
複製代碼

這會給依據輸入的值設置不一樣的顏色樣式。

在 Codepen 上試試

在某些狀況下，某些選擇器會具備與:valid和:invalid相同的效果。

:required和:optional

瀏覽器支持:required

瀏覽器支持:optional

這些選擇器分別適用於在提交表單的以前必填的和選填的表單元素。那些非表單元素不會被匹配。

例如：

input:optional {
  color: gray;
}
input:required {
  color: red;
}
複製代碼

這會給那些必填的元素添加設置紅色的樣式，給非必填的元素添加灰色的樣式。

在 Codepen 上試試

樹結構僞類

這類選擇器包括那些容許基於文檔樹中的信息進行選擇，可是不能由其它選擇器表示的選擇器，例如元素相對於其父元素的位置。

:nth-child(n [of selector]?) 和 :nth-last-child(n [of selector]?)

瀏覽器支持（在我寫這篇文章的時候，尚未任何一個瀏覽器支持這個第四級選擇器。）

:nth-child選擇器匹配做爲其父級的第 n 個子元素。:nth-last-child也同樣的，只不過它是從最後一個元素開始計數的。你可使用:nth測試來了解它們之間的區別，並進一步瞭解 An+B 表示法。

在這篇文章的開頭，我舉了一個:nth.last-child的例子，我說這個第三級的選擇器。然而，對於第四級選擇器，這個選擇器接收一個可選的of選擇器用來篩選僅與該選擇器匹配的子元素。

除了功能更增強大以外，它的聲明方式也能夠不一樣。例如：

li.item:nth-child(-n+2)
複製代碼

選擇前面兩個具備item類的<li>元素。

它和如下的不一樣：

:nth-child(-n+2 of li.item)
複製代碼

這會選擇前面兩個帶有item類的<li>元素即便它們並非列表的前兩個元素。

嘗試一下（在支持該選擇器的瀏覽器中，例如 Safari）：

例一

例二

網格結構僞類

這類選擇器包括使用表格的列的選擇器。

F || E

在我寫這篇文章的時候，尚未任何一個瀏覽器支持這個選擇器。

列組合器選擇器（||）選擇類型 E 的元素，該元素表示表中的單元格並屬於由類型 F 的元素表示的列。

例如，有以下表：

ID	Description	Price
1	Computer	$999
2	Tablet	$499

對於如下樣式

col.selected || td {
  background-color: lightyellow;
}
複製代碼

這會給所選列（價格）的單元格（<td>元素）設置淺黃色的背景色。

在 Codepen 上試試

:nth-col(An+B)和:nth-last-col(An+B)

在我寫這篇文章的時候，這個選擇器尚未被任何一個瀏覽器支持。

你能夠把這些選擇器看做是:nth-child和:nth-last-child的列版本。

:nth-col(An+B)選擇網格或表格中的一個在該元素之間還有 An+B-1 個元素的元素（n 爲 0 或任意一個整數）。

例如：

col.nth-col(1) {
  background-color: lightyellow;
}
col.nth-last-col(1) {
  background-color: lightgreen;
}
複製代碼

這會給表格的第一列元素添加一個淺黃色背景色，。被最後一列元素添加一個淺綠色背景色。

在 Codepen 上試試

結論

第四級選擇器使您能夠輕鬆聲明覆雜的選擇規則。

咱們涵蓋了2019年1月《編輯器草案》規範中定義的大多數選擇器，可是，我遺漏了一些可能會很快消失或很快改變的選擇器，或者關於它們的信息很少（除了不受支持） 任何瀏覽器）：

• :target-within
• :scope（不要將它和做用域樣式混淆）
• 時間僞類（你能夠在這裏瞭解更多信息）
• :blank
• :user-invalid

但絕對要注意這些以及第4級選擇器的其他部分。