『真香警告』這33個超級好用的CSS選擇器，你可能見都沒見過。

• 做者：陳大魚頭
• github： KRISACHAN

前言

CSS 選擇器是 CSS 世界中很是重要的一環。

在 CSS 2 以後，全部的 CSS 屬性都是按模塊去維護的。

CSS 選擇器也是如此，然而現在也已經發布了第四版 —— CSS Selectors Level 4 ，這一版最先的草案發佈於2011年09月29日，最後更新是2018年11月21日。

下面讓咱們一塊兒來看看 Level 4 新推出的一些選擇器。

正文

下面咱們按照類型來劃分

邏輯組合（Logical Combinations）

在這個分類下，咱們有如下四個選擇器：

:not()

其實 :not() 不算是新標籤，不過在 Level 4 裏，增長了多選的功能，代碼以下：

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

/* 等價於 */
div:not(.left), div:not(.right), div:not(.top) {
  display: flex;
}
複製代碼

兼容性以下：

額。。。還不能用

:is()

:is() 僞類將選擇器列表做爲參數，並選擇該列表中任意一個選擇器能夠選擇的元素。這對於以更緊湊的形式編寫大型選擇器很是有用。

看個栗子：

/* 選擇header, main, footer裏的任意一個懸浮狀態的段落(p標籤) */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 等價於 */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}
複製代碼

兼容以下：

:where()

:where() 僞類接受選擇器列表做爲它的參數，將會選擇全部能被該選擇器列表中任何一條規則選中的元素。

其實就是跟 :is() ，惟一不一樣的就是 :where() 的優先級老是爲 0 ，可是 :is() 的優先級是由它的選擇器列表中優先級最高的選擇器決定的。

代碼以下：

<style> :is(section.is-styling, aside.is-styling, footer.is-styling) a { color: red; } :where(section.where-styling, aside.where-styling, footer.where-styling) a { color: orange; } footer a { color: blue; } </style>
<article>
    <h2>:is()-styled links</h2>
    <section class="is-styling">
        <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
    </section>

    <aside class="is-styling">
        <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
    </aside>

    <footer class="is-styling">
        <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
    </footer>
</article>

<article>
    <h2>:where()-styled links</h2>
    <section class="where-styling">
        <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
    </section>

    <aside class="where-styling">
        <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
    </aside>

    <footer class="where-styling">
        <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
    </footer>
</article>
複製代碼

:is() 跟 :where() 對比效果圖以下：

兼容性以下：

:has()

:has() 僞類表明一個元素，其給定的選擇器參數（相對於該元素的 :scope）至少匹配一個元素。

:has() 接受一個選擇器組做爲參數。在當前規範中 :has() 並未列爲實時選擇器配置的一部分，意味着其不能用於樣式表中。

語法以下：

// 下面的選擇器只會匹配直接包含 <img> 子元素的 <a> 元素
a:has(> img)

// 下面的選擇器只會匹配其後緊跟着 <p> 元素的 <h1> 元素：
h1:has(+ p)
複製代碼

兼容性以下：

嗯，全紅。。。

語言僞類（Linguistic Pseudo-classes）

:dir()

:dir()僞類匹配特定文字書寫方向的元素。在HTML中, 文字方向由dir屬性決定。其餘的文檔類型可能有其餘定義文字方向的方法。

:dir() 並不等於使用 [dir=…] 屬性選擇器。後者匹配 dir 的值且不會匹配到未定義此屬性的元素，即便該元素繼承了父元素的屬性；相似的， [dir=rtl] 或 [dir=ltr]不會匹配到dir屬性的值爲auto的元素。而 :dir()會匹配通過客戶端計算後的屬性, 不論是繼承的dir值仍是dir值爲auto的。

例子以下：

<style> :dir(ltr) { background-color: yellow; } :dir(rtl) { background-color: powderblue; } </style>
<div dir="rtl">
      <span>test1</span>
      <div dir="ltr">test2
        <div dir="auto">עִבְרִית</div>
      </div>
</div>
複製代碼

效果以下：

兼容性以下：

又是一片紅。。

:lang()

:lang() 僞類基於元素語言來匹配頁面元素。

例子以下：

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

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

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

位置僞類（Location Pseudo-classes）

:any-link

:any-link 僞類 選擇器表明一個有連接錨點的元素，而無論它是否被訪問過，也就是說，它會匹配每個有 href 屬性的 <a>、<area> 或 <link>元素。所以，它會匹配到全部的 :link 或 :visited。

例子以下：

<style> a:any-link { border: 1px solid blue; color: orange; } /* WebKit 內核瀏覽器 */ a:-webkit-any-link { border: 1px solid blue; color: orange; } </style>
<a href="https://example.com">External link</a><br>
<a href="#">Internal target link</a><br>
<a>Placeholder link (won't get styled)</a>
複製代碼

效果以下：

兼容性以下：

:local-link

:local-link僞類能夠單獨格式化本地連接（原文是local links）(內部連接)。

例子以下：

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

效果 & 兼容性

沒有一個瀏覽器是支持的，看不到效果

:target-within

:target-within僞類適用於:target所匹配的元素，以及它DOM節點內全部匹配的元素。

例子以下：

div:target-within {
  	border: 2px solid black;
}
複製代碼

效果 & 兼容性

沒有一個瀏覽器是支持的，看不到效果

:scope

:scope僞類表示做爲選擇器要匹配的做用域的元素。不過目前它等效於 :root。

由於還沒有有瀏覽器支持CSS的局部做用域。

例子以下：

:scope {
  	background-color: lime;
}
複製代碼

兼容性以下：

瀏覽器算法不支持，兼容有跟沒沒區別~

用戶行爲僞類（User Action Pseudo-classes）

:focus-visible

當元素匹配 :focus 僞類而且客戶端(UA)的啓發式引擎決定焦點應當可見(在這種狀況下不少瀏覽器默認顯示「焦點框」。)時，:focus-visible 僞類將生效。

這個選擇器能夠有效地根據用戶的輸入方式(鼠標 vs 鍵盤)展現不一樣形式的焦點。

例子以下：

<style> input, button { margin: 10px; } .focus-only:focus { outline: 2px solid black; } .focus-visible-only:focus-visible { outline: 4px dashed darkorange; } </style>
<input value="Default styles"><br>
<button>Default styles</button><br>
<input class="focus-only" value=":focus only"><br>
<button class="focus-only">:focus only</button><br>
<input class="focus-visible-only" value=":focus-visible only"><br>
<button class="focus-visible-only">:focus-visible only</button>
複製代碼

效果以下：

兼容性以下：

目前只有Chrome 67+ 兼容...

:focus-within

:focus-within僞類適用於:focus所匹配的元素，以及它DOM節點內全部匹配的元素。

例子以下：

<style> form { border: 1px solid; color: gray; padding: 4px; } form:focus-within { background: #ff8; color: black; } input { margin: 4px; } </style>
複製代碼

效果以下：

時間尺寸僞類（Time-dimensional Pseudo-classes）

:current && :past && :future

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

例子以下：

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


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

兼容性以下：

目前沒有任何瀏覽器支持

輸入僞類（The Input Pseudo-classes）

:read-only 與 :read-write

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

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

例子以下：

<style> :read-only { font-size: 20px; color: green; } :read-write { border: 1px solid orange; font-size: 18px; } </style>
<input type="text" placeholder='text here'>
<input type="tel" placeholder='number here'>
<select>
      <option>1</option>
      <option>2</option>
</select>

複製代碼

效果以下：

兼容性以下：

:placeholder-shown

:placeholder-shown 僞類 在 <input> 或 <textarea> 元素顯示 placeholder text 時生效。

例子以下：

<style> input { border: 2px solid black; padding: 3px; } input:placeholder-shown { border-color: silver; } </style>
<input placeholder="Type something here!">
複製代碼

效果以下：

兼容性以下：

:default

:default 僞類選擇器 表示一組相關元素中的默認表單元素。

該選擇器能夠在 <button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用。

例子以下：

<style> input:default { box-shadow: 0 0 2px 1px coral; } input:default + label { color: coral; } </style>
<input type="radio" name="season" id="spring">
<label for="spring">Spring</label>

<input type="radio" name="season" id="summer" checked>
<label for="summer">Summer</label>

<input type="radio" name="season" id="fall">
<label for="fall">Fall</label>

<input type="radio" name="season" id="winter">
<label for="winter">Winter</label>
複製代碼

效果以下：

兼容性以下：

:indeterminate

:indeterminate 僞類選擇器表示狀態不肯定的表單元素。

它支持：

• <input type="checkbox"> 元素，其 indeterminate 屬性被JavaScript設置爲 true 。
• <input type="radio"> 元素, 表單中擁有相同 name值的全部單選按鈕都未被選中時。
• 處於不肯定狀態的 <progress> 元素

例子以下：

<style> input, span { background: red; } :indeterminate, :indeterminate + label { background: lime; } progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; } </style>
<div>
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Background should be green</label>
</div>
<br />
<div>
    <input type="radio" id="radio">
    <label for="radio">Background should be green</label>
</div>
<br />
<progress></progress>
<script> 'use strict' const inputs = document.querySelectorAll('input') inputs.forEach(input => { input.indeterminate = true }) </script>
複製代碼

效果以下：

兼容性以下：

:valid 與 :invalid

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

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

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

例子以下：

<style> input:valid { outline: 1px solid green; } input:invalid { outline: 1px solid red; } </style>
輸入文字：
<input type="text" pattern="[\w]+" required />
<br />
輸入電話號碼：
<input type="tel" pattern="[0-9]+" required />
複製代碼

效果以下：

兼容性以下：

:in-range 與 :out-of-range

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

例子以下：

<style> li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } </style>
<form action="" id="form1">
    <ul>Values between 1 and 10 are valid.
        <li>
            <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
            <label for="value1">Your value is </label>
        </li>
    </ul>
</form>
複製代碼

效果以下：

兼容性以下：

:required 與 :optional

僞類選擇器:required和:optional匹配了<input>，<select>, 或 <textarea>元素。

:required表示「必填」

:optional表示「可選」

例子以下：

<style> input:required { border: 1px solid orange; } input:optional { border: 1px solid green; } </style>
必填的：<input type="text" required>
<br />
可選的：<input type="text">
複製代碼

效果以下：

兼容性以下：

:required 的兼容性在上面有。

:blank

:blank 僞類選擇器 用於匹配以下節點：

1. 沒有子節點;
2. 僅有空的文本節點;
3. 僅有空白符的文本節點。

有點相似於:empty，可是比:empty寬鬆，目前仍是沒有任何一款瀏覽器支持。

:user-invalid

:user-invalid僞類選擇器匹配輸入錯誤的元素。不過跟其它的輸入僞類不一樣的是，它僅匹配用戶輸入時的錯誤，而不是靜默狀態下的錯誤，這樣就會比較人性化，惋惜，目前仍是沒有任何一款瀏覽器支持。

樹型僞類（Tree-Structural pseudo-classes）

:nth-child 與 :nth-last-child

:nth-child 與 :nth-last-child並非 Level 4 才推出的僞類選擇器，可是在 Level 4 裏 新增了在元素組裏匹配的功能。

語法以下：:nth-child/nth-last-child(An + B [of S] ?)

例子以下：

:nth-child(-n+3 of li.important)
複製代碼

上面的例子經過傳遞選擇器參數，選擇與之匹配的第n個元素，這裏表示li.important中前三個子元素。

它跟如下規則不一樣：

li.important:nth-child(-n+3)
複製代碼

這裏表示的時候如意前三個子元素剛纔是li.important時才能被選擇獲得。

兼容性以下：

（魚頭注：牛皮，Safari竟然彎道超車了，不過別的瀏覽器不支持，也沒啥用...）

網格選擇器（Grid-Structural Selectors）

||

|| 組合器選擇屬於某個表格行的節點。

例子以下：

<style> col.selected || td { background: gray; color: white; font-weight: bold; } </style>
<table border="1">
      <colgroup>
            <col span="2"/>
            <col class="selected"/>
      </colgroup>
      <tbody>
            <tr>
                  <td>A
                  <td>B
                  <td>C
            </tr>
            <tr>
                  <td colspan="2">D</td>
                  <td>E</td>
            </tr>
            <tr>
                  <td>F</td>
                  <td colspan="2">G</td>
            </tr>
      </tbody>
</table>
複製代碼

上面的例子可使C，E 與 G單元格變灰。

很惋惜，目前仍是沒有任何瀏覽器給予支持。

:nth-col() 與 :nth-last-col()

僞類選擇器:nth-col() 與 :nth-last-col()表示選擇正向或反向的表格行的節點。

語法和:nth-child 與 :nth-last-child相似，只不過它是選擇表格內的元素。

目前仍是沒有任何瀏覽器支持。

最後

總結

以上即是CSS選擇器 Level 4 裏新出的全部選擇器，其實都是很是有用的，雖然有些選擇器的瀏覽器支持度並不樂觀的。

但願各大瀏覽器廠商能夠趕快增長對它們的支持吧。

參考資料

1. can i use
2. MDN
3. Selectors Level 4 W3C Working Draft

後記

若是你喜歡探討技術，或者對本文有任何的意見或建議，很是歡迎加魚頭微信好友一塊兒探討，固然，魚頭也很是但願能跟你一塊兒聊生活，聊愛好，談天說地。 魚頭的微信號是：krisChans95 也能夠掃碼關注公衆號，訂閱更多精彩內容。 公衆號窗口回覆『 前端資料 』，便可獲取約 200M 前端面試資料，不要錯過。