[譯]19個CSS level 4 選擇器

• 原文作者：Marouen Mhiri
• 原文連結：19 CSS-Level-4 selectors（原文標題是20，但實際只有19個）
• 譯者：陳大魚頭
• 譯文首發：krissarea.gitee.io
• 推薦理由：因為喜歡CSS啊

你不得不 ? CSS

以下所有選擇器的相容性表格內容都截止於原文首發時間，若要看最新的相容性狀態，請檢視文件

1. Checkbox — Indeterminate狀態

這是<input type="checkbox">第三個狀態。除了:checked和:unchecked的偽類選擇器之外，還可以使用另一個狀態:indeterminate。

它長得像這樣（在chrome下）:

警告：狀態indeterminate不能像這樣<input type='checkbox' indeterminate>寫在HTML裡。只能像這樣寫在Javascript裡：

-- HTML--
<input type="checkbox" class="indeterminate">
-- JS --
document.querySelector('.indeterminate').indeterminate = true;
複製程式碼

核取方塊仍然只能計算checked或unchecked的狀態，indeterminate偽類選擇器只是個視覺化的狀態。

瀏覽器支援狀態：

2. Negation

在Selectors Level 4中:not()偽類選擇器可以輸入一個要排除在外的CSS屬性陣列。

在Selectors Level 3中:not()只能接受一個簡單的選擇器。

但現在，你能把:not(a):not(.b):not([c])寫成:not(a, .b, [c])

/* 除了.teaser-left, .teaser-right, .teaser-top之外所以的div的盒子模型都會變成flex
*/
div:not(.teaser-left, .teaser-right, .teaser-top) {
  display: flex;
}

/* 除了最後一個以外的div的margin-right都會變為0 */
div:not(:last-child) {
  margin-right: 0;
}

/* 除了第一個以外的div的padding都會變成0 */
div:not(:first-of-type) {
  padding: 0;
}
複製程式碼

瀏覽器支援狀態：（譯者注：Safari居然彎道超車了...比Chrome跟Firefox更早的支援這個屬性?）

3. Matches

匹配任何屬性的偽類選擇器:matches()是一個函式式的偽類選擇器，可以傳入選擇器列表作為引數。它表示則由傳入引數的表示的元素。

:matches()算是與:not()相對的偽類選擇器。

/* 給所有class為container跟subcontainer的div的padding-left變為20px' */
div:matches(.container, .subcontainer) {
  padding-left: 20px;
}

/* ------------- */

/* 可以這麼寫 */
:matches(article, aside, nav) div.headline {
  color: #BADA55;
}

/* 也可以這麼寫... */
section div.headline,
aside div.headline,
nav div.headline {
  color: #BADA55;
}
複製程式碼

注意：matches()跟:not()互相巢狀或者:matches()巢狀:matches()都是不執行的。

/* 不執行 */
:matches(:not(...))

/* 不執行 */
:not(:matches(...))

/* 不執行 */
:matches(:matches(...))
複製程式碼

瀏覽器支援狀態：

4. Case-sensitivity

這個選擇器接受所有屬性的值為輸入項的元素。

input[value="name" i] {
  background:red;
}
複製程式碼

在這個例子中，所有匹配到value為name（不管大小寫），例如Name，NAME, nAmE的<input />元素的背景色都為red。

瀏覽器支援狀態：

5. Relational

親屬偽類選擇器:has只能選擇包含特定內容的元素。

/* 每個包含article標籤的section的margin-bottom都為20px */
section:has(article) {
  margin-bottom: 20px;
}

/* 每個h1之前的div的padding-left都為10px */
div:has(+ h1) {
  padding-left: 10px; 
}
複製程式碼

瀏覽器支援狀態：（譯者注：這個選擇器挺好用的，可惜全線飆紅?）

6. Language

早在CSS2 的時候就有:lang()偽類選擇器了，只是在Level 4選擇器新增了萬用字元匹配。:lang()裡的引數代表了所選擇的語言。

/* 下例表示選擇文字語言帶有-TN的div元素 (ar-TN, fr-TN). */

div:lang(*-TN) {
  background-color: green
}
複製程式碼

瀏覽器支援狀態：沒有一個支援的。（譯者注：比:has()還慘。。好吧，雖然看起來並沒有什麼區別。）

7. Directionality

:dir()偽類選擇器代表著HTML文件書寫方向的元素。

/* 下例代表選擇所有文件書寫方向為從左到右的blockquote標籤的border-left為5px solid #555 */

blockquote:dir(ltr) {
  border-left: 5px solid #555;
}

/* 下例代表選擇所有文件書寫方向為從右到左的blockquote標籤的border-right為5px solid #555 */

blockquote:dir(rtl) {
  border-right: 5px solid #555;
}
複製程式碼

瀏覽器支援狀態：只有火狐。

8. Time-Dimensional

這個偽類選擇器會選擇HTML5中<video>的語言渲染以及播放過程中的時間維度相對元素。所有相關的選擇器都像:matches()。這幾個偽類選擇器的區別在於:past會選擇:current所選的元素之前的所有節點。所以，:future就是指之後的所有節點了。

這幾個偽類選擇器同樣是沒有瀏覽器支援，但是用法如下：

/* Current */
:current(p, span) {
  background-color: yellow;
}


/* Past */
:past,
/* Future */
:future {
  display: none;
}
複製程式碼

瀏覽器支援狀態：同樣是沒有一個支援的。

9. Drag & Drop

:drop偽類選擇器匹配任何正在拖動的元素最終放置的目標元素。 :drop()偽類則類似於:drop，但允許指過濾規則，用以排除某些放置目標。 此偽類目前處於Working Draft狀態。

/* 下面的例子給每一個放下的標籤新增一個黃色 1px 的實線輪廓 */

:drop {
  outline: 1px solid yellow;
}

/* 下面的例子給所有正在活動以及有效的放置目標新增一個黃色 1px 的實線輪廓，請注意兩個關鍵字valid和active是用空格隔開的 */

:drop(valid active) {
  outline: 1px solid yellow;
}
複製程式碼

瀏覽器支援狀態：同樣是沒有一個支援的。

10. Hyperlink

:any-link偽類選擇器表示著作為超連結的源錨點元素（具有href屬性的元素）。換而言之，就是任何匹配:link和:visited的元素。

/* all links within the element with the id 'content' will be red without an underline. */
#content a:any-link {
  color: red;
  text-decoration: none;
}
複製程式碼

瀏覽器支援狀態：支援帶字首的。

E:-webkit-any-link {/* Chrome, Safari, Opera */}
E:-moz-any-link {/* Firefox */}
複製程式碼

11. Local-Link

使用:local-link偽類選擇器可以單獨格式化本地連結（原文是local links）(內部連結)。

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

瀏覽器支援狀態：同樣是沒有一個支援的。

12. Default-Option

:default偽類選擇器匹配一組相似元素中預設的所有UI元素。舉個例子，預設在<form>裡的<button>或者<select>中最初的<option>。

/* 把所有的預設UI元素的margin值變為5px */

:default {
  margin: 5px;
}
複製程式碼

瀏覽器支援狀態：

13. Validity

判斷有效性的偽類選擇器（:valid和:invalid）匹配有效或無效，<input>或<form>元素。

:valid偽類選擇器表示值通過驗證的<input>，這告訴使用者他們的輸入是有效的。

:invalid偽類選擇器表示值不通過通過驗證的<input>，這告訴使用者他們的輸入是無效的。

<input type="text" pattern="[\w]+" required />
<input type="tel" pattern="[0-9]+" required />

/* 所有有效的輸入欄位都將具有綠色輪廓,
無效的將有一個紅色輪廓. */
input:valid {
  outline: 1px solid green;
}

input:invalid {
  outline: 1px solid red;
}
複製程式碼

瀏覽器支援狀態：

14. Range

如果一個時間或數字<input>具有max或min屬性，那麼:in-range會匹配到輸入值在指定範圍內的<input>，out-of-input則匹配輸入值不在指定範圍的<input>。如果沒有規定範圍，則都不匹配。

/* 所有數字輸入框，如果輸入內容在其範圍內，背景色則變成綠色，否則變為紅色 */

input[type="number"]:in-range {
  background-color: green;
}

input[type="number"]:out-of-range {
  background-color: red;
}
複製程式碼

瀏覽器支援狀態：

15. Requirement

偽類選擇器:required和:optional匹配了必填或可選的<form>元素。

<input type="text" required>
<input type="text">


/* 所有必填輸入框在滑鼠移過的時候都會顯示一個橙色1px的底部實線邊框 */

input:required:hover{
  border-bottom: 1px solid orange;
}
input:optional:hover {
  border-bottom: 1px solid green;
}
複製程式碼

瀏覽器支援狀態：

16. User interaction

:user-error偽類選擇器表示選擇一個輸入內容不正確的input元素，但是隻有在使用者操作之後才會顯示。

/* 使用者輸入任何無效，超出範圍，或者該有內容卻為空的內容時，input將會出現一個為1px紅色的虛線。 */

input:user-error {
  border-bottom: 1px dashed red;
}
複製程式碼

瀏覽器支援狀態：沒有支援的瀏覽器。（譯者注：這麼好用的偽類，可惜瀏覽器不支援，太可惜了。）

17. Mutability

可變性偽類選擇器表示其內容是否是使用者可以修改的元素。

:read-only

:read-only偽類選擇器表示當前元素是使用者不可修改的。

:read-write

:read-write偽類選擇器表示當前元素是使用者可修改的。這個偽類選擇器可以使用在一個可輸入的元素或``contenteditable元素（HTML5 屬性）。

<input type="text" placeholder='text here'>
<input type="tel" placeholder='number here'>
<select>
  <option>1</option>
  <option>2</option>
</select>

/*
大多數元素（這裡是選擇框）將會擁有一個綠色且大小為20px的字型。
可讀寫元素（這裡是input框）將會有一個橙色的邊框，而且字型大小為18px。
*/
:read-only {
  font-size: 20px;
  color: green;
}

:read-write {
  border: 1px solid orange;
  font-size: 18px;
}
複製程式碼

瀏覽器支援狀態：

18. Tree structural

樹狀結構的偽類選擇器是在CSS3中引入的。在level 4 選擇器中新增了:blank。這些偽類選擇器所選擇的元素是在文件樹中的。

:blank偽類選擇器類似於:empty，但是也能匹配到元素內容的空白符（空格，tabs和換行）。

/* 所有內容為空的div的margin都設為0 */

div:blank {
  margin: 0;
}
複製程式碼

瀏覽器支援狀態：只有桌面端的火狐支援（需要字首）

19. Descendant Combinator

後代組合子（E >> F）的作用跟E F基本相同。

p >> span {
   color: green;
}
/* 也可以這麼寫 */
p span {
  color: green;
}
複製程式碼

瀏覽器支援狀態：目前都不支援。

正如你所見，CSS將要誕生一堆新的選擇器（希望吧 :-)）。對於有效的選擇器，我有著極大的興趣，並且現在也有把它們用在生產系統上。我希望你們可以找時間來了解這些新的功能並且持續關注這相關的問題 www.w3.org/TR/selector…

譯者注：CSS跟EMCAScript一樣不斷的在更新著。但可能是國情（國產瀏覽器的相容問題，使用者使用的系統版本等），也有可能是不是太過重視CSS，所以目前在國內開發者對CSS熱情並不高，也有很多人不願意深入去了解CSS。魚頭我跟原文作者一樣，都是很喜歡CSS的人，真心希望這些新的CSS屬性可以儘快被現代瀏覽器相容，也希望有更多的開發者重視並願意持續投入精力學習CSS。順便吐槽一下，原文標題是“20個CSS 等級4的選擇器”，但實際只有19個。

如果你也喜歡`CSS`，喜歡探討技術，或者對本文，本系列有任何的意見或建議，魚頭非常希望你能加入一個有趣的微信群 — “進擊的CSS”。你可以掃描下方二維碼，新增魚頭微信，新增時註明 “加群”，如果你覺得我的文章有趣，歡迎關注微信公眾號“魚頭的Web海洋”。衷心希望可以遇見你。