盤點 CSS Selectors Level 4 中新增的選擇器

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

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

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

、 都是使用 (1, 0, 0) 的權重值。

偽元素不能在:is中使用

瀏覽器支持情況

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

:where()

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

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

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

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

:scope

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

 

 

 

 


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

你會發現，我本來只想查 .select 裡面的 .outer .inner，這明顯不符合預期，那麼使用 :scope 可以解決此問題。

var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 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選擇到當前命中的那個元素。

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

:focus-within

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

:focus-visible

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

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

:dir()

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

:blank

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

:user-invalid

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

:indeterminate

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

時間線相關選擇器

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

:current()

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

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

:past()

已經被閱讀過或顯示過的元素。

:future()

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

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

十五年編程經驗，今年1月整理了一批2019年最新WEB前端教學視頻，不論是零基礎想要學習前端還是學完在工作想要提升自己，這些資料都會給你帶來幫助，從HTML到各種框架，幫助所有想要學好前端的同學，學習規劃、學習路線、學習資料、問題解答。只要關注我的頭條號，後臺私信我【前端】兩個字，即可免費獲取。