什么是 :is 與 :where？
 

:is() 和 :where() 都是偽類函數，可以幫助縮短和停止創建選擇器時的重復。它們都接受選擇器的參數數組（id，類，標簽等），并選擇可以在該列表中選擇的任何元素。

這對如何幫助我們編寫更短的選擇器可能沒有多大意義，所以讓我們嘗試使用 :where() 和 :is() 。

如何使用 :is 與 :where？

:where() 可以幫助我們解決類似這樣的問題

.btn span > a:hover,
#header span > a:hover,
#footer span > a:hover {
  ...;
}

變成這樣的東西

:where(.btn, #header, #footer) span > a:hover {
  ...;
}

和 :is() 可以幫助將相同的示例添加到該示例中

is(.btn, #header, #footer) span > a:hover {
  ...;
}

:is 與 :where 和有什么不一樣？

:where() 和 :is() 看起來和功能都是一樣的，但是它們之間有一個區別要記住，那就是它們有不同的特殊性。:where() 是簡單的，其特異性總是為 0，而 :is() 的特異性為最強的選擇器。

什么是 CSS 特異性（簡而言之）？

在 CSS 中有四個層次的特異性層次。每一個級別或類別都有不同的分數，我們可以將所有的分數相加來計算選擇器的特異性。

哪個選擇器的數量最多，哪個元素的樣式就會被應用到該元素上，這就是為什么有時當你寫 CSS 時，你的樣式不會被應用，會在開發工具中顯示為劃線。

特異性等級評分

• ID——特異性得分為 100
• 內聯樣式——特異性得分為 1000
• 元素和偽類——特異性得分為 1
• 類、偽類和屬性——特異性得分為 10

例如

button.btn {
  color: red;
}
.btn {
  color: green;
}

.btn = 10

button.btn = 1 + 10 = 11

如果我們把 .btn 類放在 <button> 標簽上，文字就會變成紅色，因為 button.btn 選擇器的分數高于 .btn 選擇器。

正如你所看到的，有兩種不同的專屬性級別的偽類，這是因為不同的偽類可能具有不同的專屬性，這取決于你使用的偽類以及如何使用它們。

到此這篇關于CSS新增的:where和:is偽類函數是什么的文章就介紹到這了,更多相關CSS :where和:is偽類函數內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！