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的紅色實線邊框。