什么是 :is 與 :where？
:is() 和 :where() 都是偽類(lèi)函數(shù)，可以幫助縮短和停止創(chuàng)建選擇器時(shí)的重復(fù)。它們都接受選擇器的參數(shù)數(shù)組（id，類(lèi)，標(biāo)簽等），并選擇可以在該列表中選擇的任何元素。
這對(duì)如何幫助我們編寫(xiě)更短的選擇器可能沒(méi)有多大意義，所以讓我們嘗試使用 :where() 和 :is() 。
如何使用 :is 與 :where？
:where() 可以幫助我們解決類(lèi)似這樣的問(wèn)題
.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() 看起來(lái)和功能都是一樣的，但是它們之間有一個(gè)區(qū)別要記住，那就是它們有不同的特殊性。:where() 是簡(jiǎn)單的，其特異性總是為 0，而 :is() 的特異性為最強(qiáng)的選擇器。
什么是 CSS 特異性（簡(jiǎn)而言之）？
在 CSS 中有四個(gè)層次的特異性層次。每一個(gè)級(jí)別或類(lèi)別都有不同的分?jǐn)?shù)，我們可以將所有的分?jǐn)?shù)相加來(lái)計(jì)算選擇器的特異性。
哪個(gè)選擇器的數(shù)量最多，哪個(gè)元素的樣式就會(huì)被應(yīng)用到該元素上，這就是為什么有時(shí)當(dāng)你寫(xiě) CSS 時(shí)，你的樣式不會(huì)被應(yīng)用，會(huì)在開(kāi)發(fā)工具中顯示為劃線。
特異性等級(jí)評(píng)分
- ID——特異性得分為 100
- 內(nèi)聯(lián)樣式——特異性得分為 1000
- 元素和偽類(lèi)——特異性得分為 1
- 類(lèi)、偽類(lèi)和屬性——特異性得分為 10
例如
button.btn {
color: red;
}
.btn {
color: green;
}
.btn = 10
button.btn = 1 + 10 = 11
如果我們把 .btn 類(lèi)放在 <button> 標(biāo)簽上，文字就會(huì)變成紅色，因?yàn)?button.btn 選擇器的分?jǐn)?shù)高于 .btn 選擇器。
正如你所看到的，有兩種不同的專(zhuān)屬性級(jí)別的偽類(lèi)，這是因?yàn)椴煌膫晤?lèi)可能具有不同的專(zhuān)屬性，這取決于你使用的偽類(lèi)以及如何使用它們。
到此這篇關(guān)于CSS新增的:where和:is偽類(lèi)函數(shù)是什么的文章就介紹到這了,更多相關(guān)CSS :where和:is偽類(lèi)函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
