CSS 偽類(lèi)是用來(lái)添加一些選擇器的特殊效果。
由于狀態(tài)的變化是非靜態(tài)的，所以元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)偽類(lèi)的樣式；當(dāng)狀態(tài)改變時(shí)，它又會(huì)失去這個(gè)樣式。
由此可以看出，它的功能和 class 有些類(lèi)似，但它是基于文檔之外的抽象，所以叫偽類(lèi)。
當(dāng)然偽類(lèi)針對(duì)不同瀏覽器的兼容性還存有一定的不同，建議使用前先了解下對(duì)應(yīng)用法及兼容性。
通常最為我們熟知的****CSS****偽類(lèi)選擇器就是下面這四兄弟：
其實(shí)他們的群體不僅僅至少有這四位，還有下面這一群：
:target / 匹配所有URL帶有#XXX錨鏈接的元素 /
:first-child / 匹配某個(gè)父級(jí)元素的第一個(gè)子元素 /
:first-letter / 匹配當(dāng)前元素的第一個(gè)字母 /
:first-line / 匹配當(dāng)前元素的第一行 /
:before / 匹配當(dāng)前元素的前面 /
:after / 匹配當(dāng)前元素的后面 /
:nth-child / 匹配某個(gè)父級(jí)元素的第****n****個(gè)子元素 /
:empty / 匹配沒(méi)有內(nèi)容或子元素的元素 /
:checked / 匹配任何選中狀態(tài)的radio/checkbox/option /
:blank / 匹配未輸入的輸入框元素 /
:enabled / 匹配設(shè)置啟用了enabled的元素（設(shè)置為輸入元素） /
:disabled / 匹配設(shè)置了disabled的元素（禁止輸入） /
:required / 匹配設(shè)置了required的元素 （必須輸入）/
:valid / 匹配判定輸入內(nèi)容有效的輸入框元素 /
:invalid / 匹配判定輸入內(nèi)容無(wú)效的輸入框元素 /
:playing / 匹配正在播放的音頻或視頻元素 /
:lang / 匹配設(shè)置了lang='no'屬性的元素 /
:focus / 匹配當(dāng)前獲取焦點(diǎn)的元素 /
當(dāng)然偽類(lèi)選擇器還有很多，我們只是例舉了部分相對(duì)常用的，想了解更多可以看看****《CSS偽類(lèi)選擇器》
今天我們主要是來(lái)介紹一下下面這三個(gè)新面孔的：
:is / 將對(duì)應(yīng)的匹配規(guī)則應(yīng)用于多個(gè)元素（最高優(yōu)先級(jí)） /
:where / 將對(duì)應(yīng)的匹配規(guī)則應(yīng)用于多個(gè)元素（最低優(yōu)先級(jí)）/
:has / 匹配包含對(duì)應(yīng)子元素的父級(jí)元素 /
1. :is偽類(lèi)選擇器
允許將某個(gè)選擇器規(guī)則匹配于多個(gè)選擇器，并且是一個(gè)可容錯(cuò)的選擇器列表，當(dāng)某一項(xiàng)規(guī)則無(wú)效時(shí)，不會(huì)阻礙其他選擇器的匹配。
相關(guān)瀏覽器兼容性：
來(lái)個(gè)簡(jiǎn)單的例子先理解一下
使用前：
header p:hover,
main p:hover,
footer p:hover {
color: #444;
cursor: pointer;
}
或像Sass進(jìn)行嵌套
header, main, footer {
p {
color: #444;
cursor: pointer;
}
}
使用后：
:is(header, main, footer) p {
color: #444;
}
再來(lái)個(gè)復(fù)雜點(diǎn)的例子
使用前：
article section.primary:not(:first-child) h1,
article section.primary:not(:first-child) h2,
article section.primary:not(:first-child) p,
article section.secondary:not(:first-child) h1,
article section.secondary:not(:first-child) h2,
article section.secondary:not(:first-child) p {
color: green;
}
使用后：
article section:not(:first-child):is(.primary, .secondary) :is(h1, h2, p) {
color: green;
}
且當(dāng)其中某一個(gè)條件不匹配時(shí)，并不會(huì)導(dǎo)致失效，而是會(huì)自動(dòng)匹配下一個(gè)選擇器。
2. :where偽類(lèi)選擇器
功能上與 :is 相同，區(qū)別在于:is偽類(lèi)選擇器擁有最高優(yōu)先級(jí)，而 :where 的優(yōu)先級(jí)則為0，可以避免影響其他已經(jīng)聲明同類(lèi)樣式效果。
相關(guān)瀏覽器兼容性：
舉個(gè)例子：
article p {
color: black;
}
:is(article, section, aside) p {
color: red;
}
:where(article, section, aside) p {
color: blue;
}
上面代碼中三句樣式都針對(duì)article中的p元素設(shè)置了字體顏色，但最終p標(biāo)簽的字體顏色是紅色。
也就是:is的最高優(yōu)先級(jí)產(chǎn)生了效果，其次是article p{}，最后才是:where。
因此where可以更多的應(yīng)用于需要低優(yōu)先級(jí)渲染樣式的需求中。
3. :has偽類(lèi)選擇器
:has支持匹配對(duì)應(yīng)規(guī)則的父級(jí)選擇器，這將是最受歡迎的偽類(lèi)選擇器之一。
相關(guān)瀏覽器兼容性：
來(lái)個(gè)簡(jiǎn)單的例子先理解一下
a:has(img, section) {
color: red;
}
上面代碼會(huì)匹配出所有包含了img與section元素的父級(jí)a元素，并設(shè)置紅色字體顏色。
再來(lái)個(gè)相對(duì)復(fù)雜點(diǎn)的例子
fieldset:has(:required:invalid) {
border: 3px solid red;
}
上面的例子當(dāng)fieldset元素內(nèi)出現(xiàn)不滿足:required或者:invalid其中某個(gè)條件的元素時(shí)，fieldset元素會(huì)被設(shè)置一個(gè)3px的紅色實(shí)線邊框。
