前言

CSS 選擇器在實踐中是非常常用的，無論是在寫樣式上或是在 JS 中選擇 DOM 元素都需要用到。在 CSS Selectors Level 4 中，工作組繼續(xù)為選擇器標準添加了更豐富的選擇器。下面我們來了解一下。

:is()

:is 是一個用于匹配任意元素的偽類，使用方法很簡單，只需要將選擇器列表傳入即可，也就是說， :is() 的結果也就是傳入的選擇器列表中選中的元素。

那么這個選擇器有什么用呢？舉個例子：我需要對不同層級下的 h1 標簽設置不同的字體大小：

/* Level 0 */
h1 {
  font-size: 30px;
}

/* Level 1 */
section h1, 
article h1, 
aside h1, 
nav h1 {
  font-size: 25px;
}

/* Level 2 */
section section h1, 
section article h1, 
section aside h1, 
section nav h1 {
  font-size: 20px;
}

會發(fā)現(xiàn)我們需要寫很長的列表才能區(qū)分覆蓋到不同層級中的 h1 標簽，那么此時 :is 就派上了用場，前面說到， :is 即代表著參數(shù)里面的選擇選擇器列表選擇的元素，那么我們可以把上面的代碼進行簡化：

/* Level 0 */
h1 {
  font-size: 30px;
}

/* Level 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}

/* Level 2 */
section :is(section, article, aside, nav) h1 {
  font-size: 20px;
}

是不是一下子簡潔了很多？是。

:is 也可以直接看做是類似選擇列表的語法糖，簡化編寫步驟，瀏覽器會自動將 :is 展開到簡化之前的形式進行解析。

使用 :is 時需要注意的

1、遇到不支持的選擇器

通常，在遇到不支持的選擇器時，瀏覽器會直接將整條規(guī)則丟棄。例如，當瀏覽器不支持 :unsupported 時， :supported 是不會生效的。

:supported, :unsupported {
    font-size: 12px;
}

而在 :is 中出現(xiàn)不支持的選擇器，則是相反的行為， :supported 仍然會被正確生效。

:is(:supported, :unsupported) {
    font-size: 12px;
}

2、選擇器的權重

整個 :is 選擇器的權重由傳入的選擇器列表中的權重最高的選擇器決定

:is(span, #id) {
    font-size: 12px;
}

#id 選擇器擁有 (1, 0 ,0) 的權重，而 span 只有 (0, 0, 1)，所以最終去匹配 <span></span> 、 <div id="id"></p> 、 <span id="id"></span> 都是使用 (1, 0, 0) 的權重值。

3、偽元素不能在 :is 中使用

瀏覽器支持情況

這里查的數(shù)據(jù)是 :matches ， :matches 即為 :is 的前身，在 CSS Selector Level 4 中，我們所熟知的 :not 也支持選擇器列表作為參數(shù)使用了，而功能上 :matches 則與 :not 是相對的，所以為了成對， :matches 改名為 :is

:where()

:where 選擇器是 :is 選擇器的無權重版本。前面提到， :is 的權重是由里邊的選擇器列表的最高權重決定的， :where 則不關心里邊的權重，它的權重直接為0。

.class:where(#id) {
    font-size: 12px;
}

如上面的例子，整個樣式規(guī)則權重為 (0, 1, 0)，只有 .class 貢獻了權重值。

在未來， :where 選擇器可能會支持指定權重值的選項

:scope

:scope 選擇器為它后面的選擇器提供了參考點，在 CSS 中，默認 :scope 代表的即為 :root 。而在使用 JavaScript 進行選擇元素時，例如 querySelector 調用，可以用來限定選擇器的選擇范圍。

<div class="outer">
  <div class="select">
    <div class="inner">
    </div>
  </div>
</div>

你會發(fā)現(xiàn)，我本來只想查 .select 里面的 .outer .inner ，這明顯不符合預期，那么使用 :scope 可以解決此問題。

var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, 不是 0

:any-link

該選擇器用于選擇所有包含 href 屬性的鏈接，在 HTML5 中，這些鏈接包含 a 、 area 以及 link 標簽。

:local-link

:local-link 和 :any-link 的作用是相同的，但 :local-link 附加了一個限制，它只能選擇到鏈接的絕對地址是和當前頁面的域名相匹配的，也就是說，如果一個鏈接的 href 是站外鏈接，將不會被 :local-link 選擇到。

:target-within

我們都知道，在 URL 中可以用過 #anchor 的形式，讓瀏覽器定位到 id 為 #anchor 或者 name 為 anchor 的錨點上， 當命中一個錨點時，我們可以使用 :target 選擇到當前命中的那個元素。

現(xiàn)在有一個場景，我的某個 section 容器的邊框需要在其里邊的某個錨點命中時改變邊框顏色，此時我們可以對這個容器使用 :target-within 選擇到這個 section ，也就是說，這個 section 內部的某個元素必須能被 :target 選中。

:focus-within

:focus-within 與 :target-within 的效果是相同的，但它僅在該容器元素內有元素被聚焦時能被選中，也就是說，這個容器內部的某個元素必須能被 :focus 選中。

:focus-visible

當一個元素被聚焦，能被 :focus 選中并且瀏覽器需要在該元素上顯示聚焦效果時（例如瀏覽器中輸入框聚焦時默認顯示的外框），該元素才能被這個選擇器選中。

有了這個選擇器，就能用于自定義聚焦樣式。

:dir()

該選擇器用于根據(jù)語言的書寫方向進行選擇，例如常見的左到右書寫形式（left-to-right）則可以使用 :dir(ltr) 進行選擇；右到左的書寫形式則可以使用 :dir(rtl) 進行選擇。如果給定的值是 auto ，那么會選中符合 ltr 或 rlt 順序的元素。

:blank

該選擇器用于選擇輸入框值為空的元素。

:user-invalid

該選擇器用于選擇未通過驗證的輸入框，例如在 max 和 min 范圍之外的輸入框，標明了 required 但值為空的輸入框。

:indeterminate

該選擇器用于選擇狀態(tài)未確定的元素，例如在 radio 和 checkbox 元素中，它們的值可以是是 checked 或者 unchecked ，如果沒有顯式地設定，它們的狀態(tài)都是未確定的。

時間線相關選擇器

時間線相關的選擇器用于在某些與時間進度相關的功能上使用，例如文字閱讀器閱讀的時間軸，或是在視頻回放中用視頻時間顯示 WebVTT 字幕等。

:current()

當前正在被閱讀器閱讀的元素或正在被顯示的字幕。

article:current(p) {
    background: yellow;
}

:past()

已經(jīng)被閱讀過或顯示過的元素。

:future()

將要被閱讀或顯示的元素。

總結

通過豐富選擇器的語法，可以使得我們在實踐中更容易地去選擇元素并確定樣式。同時也能避免一些不必要的hack。

參考鏈接

https://developer.mozilla.org/en-US/docs/Web/CSS/:is
https://www.w3.org/TR/selectors-4/#changes-level-3

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論