CSS中的 :Where和 :Is 偽類函數(shù)怎么用

這篇文章主要介紹“CSS中的 :Where和 :Is 偽類函數(shù)怎么用”，在日常操作中，相信很多人在CSS中的 :Where和 :Is 偽類函數(shù)怎么用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS中的 :Where和 :Is 偽類函數(shù)怎么用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

什么是 :is 與 :where?

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

這對如何幫助我們編寫更短的選擇器可能沒有多大意義，所以讓我們嘗試使用 :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() 看起來和功能都是一樣的，但是它們之間有一個(gè)區(qū)別要記住，那就是它們有不同的特殊性。:where()  是簡單的，其特異性總是為0，而 :is() 的特異性為最強(qiáng)的選擇器。

什么是CSS特異性(簡而言之)?

在CSS中有四個(gè)層次的特異性層次。每一個(gè)級別或類別都有不同的分?jǐn)?shù)，我們可以將所有的分?jǐn)?shù)相加來計(jì)算選擇器的特異性。

哪個(gè)選擇器的數(shù)量最多，哪個(gè)元素的樣式就會(huì)被應(yīng)用到該元素上，這就是為什么有時(shí)當(dāng)你寫CSS時(shí)，你的樣式不會(huì)被應(yīng)用，會(huì)在開發(fā)工具中顯示為劃線。

特異性等級評分

• ID——特異性得分為 100

• 內(nèi)聯(lián)樣式——特異性得分為 1000

• 元素和偽類——特異性得分為 1

• 類、偽類和屬性——特異性得分為 10

例如

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

.btn = 10

button.btn = 1 + 10 = 11

如果我們把 .btn 類放在 <button> 標(biāo)簽上，文字就會(huì)變成紅色，因?yàn)?button.btn 選擇器的分?jǐn)?shù)高于 .btn 選擇器。

正如你所看到的，有兩種不同的專屬性級別的偽類，這是因?yàn)椴煌膫晤惪赡芫哂胁煌膶傩?，這取決于你使用的偽類以及如何使用它們。

到此，關(guān)于“CSS中的 :Where和 :Is 偽類函數(shù)怎么用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！