CSS 偽類是用來添加一些選擇器的特殊效果。

由於狀態的變化是非靜態的，所以元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。

由此可以看出，它的功能和 class 有些類似，但它是基於文檔之外的抽象，所以叫偽類。

當然偽類針對不同瀏覽器的兼容性還存有一定的不同，建議使用前先了解下對應用法及兼容性。

通常最為我們熟知的CSS偽類選擇器就是下面這四兄弟：

:link / 未訪問的連結 /
:visited / 已訪問的連結 /
:hover / 滑鼠划過連結 /
:active / 已選中的連結 /

其實他們的群體不僅僅至少有這四位，還有下面這一群：

:target / 匹配所有URL帶有#XXX錨連結的元素 /
:first-child / 匹配某個父級元素的第一個子元素 /
:first-letter / 匹配當前元素的第一個字母 /
:first-line / 匹配當前元素的第一行 /
:before / 匹配當前元素的前面 /
:after / 匹配當前元素的後面 /
:nth-child / 匹配某個父級元素的第n個子元素 /
:empty / 匹配沒有內容或子元素的元素 /
:checked / 匹配任何選中狀態的radio/checkbox/option /
:blank / 匹配未輸入的輸入框元素 /
:enabled / 匹配設置啟用了enabled的元素（設置為輸入元素） /
:disabled / 匹配設置了disabled的元素（禁止輸入） /
:required / 匹配設置了required的元素（必須輸入）/
:valid / 匹配判定輸入內容有效的輸入框元素 /
:invalid / 匹配判定輸入內容無效的輸入框元素 /
:playing / 匹配正在播放的音頻或視頻元素 /
:lang / 匹配設置了lang='no'屬性的元素 /
:focus / 匹配當前獲取焦點的元素 /

當然偽類選擇器還有很多，我們只是例舉了部分相對常用的，想了解更多可以看看《CSS偽類選擇器》（https://www.w3cschool.cn/cssref/cssref-6xek203z.html?fcode=owtt）

今天我們主要是來介紹一下下面這三個新面孔的：

:is / 將對應的匹配規則應用於多個元素（最高優先級） /
:where / 將對應的匹配規則應用於多個元素（最低優先級）/
:has / 匹配包含對應子元素的父級元素 /

:is偽類選擇器

允許將某個選擇器規則匹配於多個選擇器，並且是一個可容錯的選擇器列表，當某一項規則無效時，不會阻礙其他選擇器的匹配。

相關瀏覽器兼容性：

來個簡單的例子先理解一下

使用前：

header p:hover,
main p:hover,
footer p:hover {
    color: #444; 
    cursor: pointer;
}

或像Sass進行嵌套

header, main, footer {
     p {
         color: #444;
         cursor: pointer;
     }
}

使用後：

:is(header, main, footer) p {
    color: #444;
}

再來個複雜點的例子

使用前：

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;
}

且當其中某一個條件不匹配時，並不會導致失效，而是會自動匹配下一個選擇器。

:where偽類選擇器

功能上與 :is 相同，區別在於:is偽類選擇器擁有最高優先級，而 :where 的優先級則為0，可以避免影響其他已經聲明同類樣式效果。

相關瀏覽器兼容性：

舉個例子：

article p {
    color: black;
}


:is(article, section, aside) p {
    color: red;
}


:where(article, section, aside) p {
    color: blue;
}

上面代碼中三句樣式都針對article中的p元素設置了字體顏色，但最終p標籤的字體顏色是紅色。

也就是:is的最高優先級產生了效果，其次是article p{}，最後才是:where。

因此where可以更多的應用於需要低優先級渲染樣式的需求中。

:has偽類選擇器

:has支持匹配對應規則的父級選擇器，這將是最受歡迎的偽類選擇器之一。

相關瀏覽器兼容性：

來個簡單的例子先理解一下

a:has(img, section) {
    color: red;
}

上面代碼會匹配出所有包含了img與section元素的父級a元素，並設置紅色字體顏色。

再來個相對複雜點的例子

fieldset:has(:required:invalid) {
    border: 3px solid red;
}

上面的例子當fieldset元素內出現不滿足:required或者:invalid其中某個條件的元素時，fieldset元素會被設置一個3px的紅色實線邊框。

帶你了解CSS偽類選擇器的新奇體驗

:is偽類選擇器

:where偽類選擇器

:has偽類選擇器