[譯]19個CSS level 4 選擇器

原文做者：Marouen Mhiri

原文連接：19 CSS-Level-4 selectors（原文標題是20，但實際只有19個）

譯者：陳大魚頭

推薦理由：由於喜歡CSS啊

你不得不 💌 CSScss

如下全部選擇器的兼容性表格內容都截止於原文首發時間，若要看最新的兼容性狀態，請查看文檔html

1. Checkbox — Indeterminate狀態

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

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

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

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

複選框仍然只能計算checked或unchecked的狀態，indeterminate僞類選擇器只是個可視化的狀態。瀏覽器

瀏覽器支持狀態：bash

caniuse — :indeterminate

2. Negation

在Selectors Level 4中:not()僞類選擇器能夠輸入一個要排除在外的CSS屬性數組。微信

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

但如今，你能把:not(a):not(.b):not([c])寫成:not(a, .b, [c])ide

/* 除了.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更早的支持這個屬性😄）

caniuse — :not()

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(...))
複製代碼

瀏覽器支持狀態：

caniuse — :matches()

4. Case-sensitivity

這個選擇器接受全部屬性的值爲輸入項的元素。

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

在這個例子中，全部匹配到value爲name（無論大小寫），例如Name，NAME, nAmE的<input />元素的背景色都爲red。

瀏覽器支持狀態：

caniuse — :case

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; 
}
複製代碼

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

caniuse — :has

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;
}
複製代碼

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

css4selectors — time-dimentional

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;
}
複製代碼

瀏覽器支持狀態：

caniuse — default

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;
}
複製代碼

瀏覽器支持狀態：

caniuse — validity

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;
}
複製代碼

瀏覽器支持狀態：

caniuse —range

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;
}
複製代碼

瀏覽器支持狀態：

caniuse — require

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;
}
複製代碼

瀏覽器支持狀態：

caniuse — mutability

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個。

若是你喜歡探討技術，或者對本文有任何的意見或建議，很是歡迎加魚頭微信好友一塊兒探討，固然，魚頭也很是但願能跟你一塊兒聊生活，聊愛好，談天說地。魚頭的微信號是：krisChans95 也能夠掃碼關注公衆號，訂閱更多精彩內容。