什麼是 :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
選擇器。
正如你所看到的，有兩種不同的專屬性級别的僞類，這是因為不同的僞類可能具有不同的專屬性，這取決于你使用的僞類以及如何使用它們。