在之前的文章《css偽選擇器學(xué)習(xí)之偽元素選擇器解析》中，我們學(xué)習(xí)了偽元素選擇器，而今天我們?cè)敿?xì)了解一下偽類選擇器，希望對(duì)大家有所幫助！

偽類選擇器

偽類選擇器 是一種允許通過未包含在HTML元素的狀態(tài)信息來定位HTML元素的用法。偽類選擇器 的具體用法就是向已有的選擇器增加關(guān)鍵字，表示定位的HTML元素的狀態(tài)信息?！就扑]學(xué)習(xí)：css視頻教程】

通過偽類，開發(fā)者可以設(shè)置元素的動(dòng)態(tài)狀態(tài)，例如懸停（hover）、點(diǎn)擊（active）以及文檔中不能通過其它選擇器選擇的元素（這些元素沒有 ID 或 class 屬性），例如第一個(gè)子元素（first-child）或者最后一個(gè)子元素（last-child）。

例如:hover偽類選擇器可以用來在用戶將鼠標(biāo)懸停在按鈕上時(shí)改變按鈕的顏色。如下示例代碼所示：

/*?所有用戶指針懸停的按鈕?*/??
?button:hover?{??
??color:?blue;??
?}

偽類的名稱不區(qū)分大小寫，但需要以冒號(hào):開頭。另外，偽類需要與 CSS 中的選擇器結(jié)合使用，語法格式如下：

選擇器:偽類?{??
??屬性?:?屬性值;??
?}

偽類選擇器 的具體語法格式為 :偽類，這里一定不要忘記 :。

CSS 中提供了各種各樣的偽類，如下表所示：

<td>:active <td>a:active <td>匹配被點(diǎn)擊的鏈接 <td>:checked <td>input:checked <td>匹配處于選中狀態(tài)的 <input> 元素 <td>:disabled <td>input:disabled <td>匹配每個(gè)被禁用的 <input> 元素 <td>:empty <td>p:empty <td>匹配任何沒有子元素的

元素

<td>:enabled <td>input:enabled <td>匹配每個(gè)已啟用的 <input> 元素 <td>:first-child <td>p:first-child <td>匹配父元素中的第一個(gè)子元素

，

必須是父元素中的第一個(gè)子元素

<td>:first-of-type <td>p:first-of-type <td>匹配父元素中的第一個(gè)

元素

<td>:focus <td>input:focus <td>匹配獲得焦點(diǎn)的 <input> 元素 <td>:hover <td>a:hover <td>匹配鼠標(biāo)懸停其上的元素 <td>:in-range <td>input:in-range <td>匹配具有指定取值范圍的 <input> 元素 <td>:invalid <td>input:invalid <td>匹配所有具有無效值的 <input> 元素 <td>:lang(language) <td>p:lang(it) <td>匹配每個(gè) lang 屬性值以 "it" 開頭的

元素

<td>:last-child <td>p:last-child <td>匹配父元素中的最后一個(gè)子元素

，

必須是父元素中的最后一個(gè)子元素

<td>:last-of-type <td>p:last-of-type <td>匹配父元素中的最后一個(gè)

元素

<td>:link <td>a:link <td>匹配所有未被訪問的鏈接 <td>:not(selector) <td>:not(p) <td>匹配每個(gè)非

元素的元素

<td>:nth-child(n) <td>p:nth-child(2) <td>匹配父元素中的第二個(gè)子元素

<td>:nth-last-child(n) <td>p:nth-last-child(2) <td>匹配父元素的倒數(shù)第二個(gè)子元素

<td>:nth-last-of-type(n) <td>p:nth-last-of-type(2) <td>匹配父元素的倒數(shù)第二個(gè)子元素

<td>:nth-of-type(n) <td>p:nth-of-type(2) <td>匹配父元素的第二個(gè)子元素

<td>:only-of-type <td>p:only-of-type <td>匹配父元素中唯一的

元素

<td>:only-child <td>p:only-child <td>匹配父元素中唯一的子元素

<td>:optional <td>input:optional <td>匹配不帶 "required" 屬性的 <input> 元素 <td>:out-of-range <td>input:out-of-range <td>匹配值在指定范圍之外的 <input> 元素 <td>:read-only <td>input:read-only <td>匹配指定了 "readonly" 屬性的 <input> 元素 <td>:read-write <td>input:read-write <td>匹配不帶 "readonly" 屬性的 <input> 元素 <td>:required <td>input:required <td>匹配指定了 "required" 屬性的 <input> 元素 <td>:root <td>root <td>匹配元素的根元素，在 HTML 中，根元素永遠(yuǎn)是 HTML <td>:target <td>#news:target <td>匹配當(dāng)前活動(dòng)的 #news 元素（單擊包含該錨名稱的 URL） <td>:valid <td>input:valid <td>匹配所有具有有效值的 <input> 元素 <td>:visited <td>a:visited <td>匹配所有已經(jīng)訪問過的鏈接

選擇器	例子	例子描述

偽類選擇器的分類

CSS 版本從第一版本發(fā)展到第三版本，提供的偽類選擇器 的數(shù)量已經(jīng)很龐大了。尤其CSS3版本新增了大量的偽類選擇器 。

偽類選擇器 的數(shù)量這么多，為了更好地梳理偽類選擇器 ，我們可以按照用途的不同分為如下 5 種類型：

<li>

用戶行為偽類：指與用戶行為相關(guān)的一些偽類，例如，懸停:hover、按下:active以及獲取焦點(diǎn):focus等。

<li>

URL定位偽類：用于定位HTML頁面中的元素

<li>

輸入偽類：與表單控件相關(guān)的偽類

<li>

結(jié)構(gòu)偽類：主要用于定位目標(biāo)元素

<li>

邏輯組合偽類：用于邏輯操作的，例如:not()，就表示不是某元素。

1、用戶行為偽類--動(dòng)態(tài)偽類選擇器

之所以稱為動(dòng)態(tài)偽類選擇器，是因?yàn)樗鼈兏鶕?jù)條件的改變匹配元素，是相對(duì)于文檔的固定狀態(tài)來說的。隨著JavaScript廣泛用于修改文檔內(nèi)容和元素狀態(tài)，動(dòng)態(tài)選擇器和靜態(tài)選擇器之間的界限越來越模糊，不過，動(dòng)態(tài)偽類選擇器仍然是一類比較特別的選擇器。

：link 和：visited 選擇器

：link選擇器匹配超鏈接，：visited選擇器匹配用戶已經(jīng)訪問過得超鏈接。

使用：visited選擇器可以應(yīng)用到鏈接元素的屬性不多。你可以改變顏色和字體，不過僅此而已。

提示：：visited選擇器匹配用戶在所有頁面訪問過的href屬性為URL的任意鏈接，而不只是你的頁面。：visited最常見的用法就是針對(duì)已訪問的鏈接應(yīng)用某種樣式，從而讓它們跟未訪問的鏈接有所區(qū)別。比如我們看新聞，看過的新聞和沒有看過的新聞在首頁列表呈現(xiàn)的狀態(tài)是不一樣的，便于我們區(qū)分。

：hover 選擇器

：hover選擇器匹配用戶鼠標(biāo)懸停在其上的任意元素。

：active 選擇器

：active選擇器匹配當(dāng)前被用戶激活的元素（一般情況下為鼠標(biāo)點(diǎn)擊該元素）。

：focus 選擇器

：focus選擇器匹配獲得焦點(diǎn)的元素，常用于 input 元素。

2、結(jié)構(gòu)性偽類選擇器

使用結(jié)構(gòu)性偽類選擇器能夠根據(jù)元素在文檔中的位置選擇元素。這類選擇器都有一個(gè)冒號(hào)字符前綴（：），例如：empty。他們可以單獨(dú)使用，也可以跟其他選擇器組合使用，如p：empty。

結(jié)構(gòu)偽類選擇器類選擇器包含的內(nèi)容如下表所示：

<td>selector:first-child <td>用來定位一組兄弟元素中的第一個(gè)元素 <td>selector:last-child <td>用來定位一組兄弟元素中的最后一個(gè)元素 <td>selector:nth-child(n) <td>用來定位一組兄弟元素中的第n個(gè)元素 <td>selector:nth-last-child(n) <td>用來定位一組兄弟元素中倒序方式的第n個(gè)元素 <td>selector:first-of-type <td>用來定位一組同類型的兄弟元素中的第一個(gè)元素 <td>selector:last-of-type <td>用來定位一組同類型的兄弟元素中的最后一個(gè)元素 <td>selector:nth-of-type(n) <td>用來定位一組同類型的兄弟元素中的第n個(gè)元素 <td>selector:nth-last-of-type(n) <td>用來定位一組同類型的兄弟元素中倒序方式的第n個(gè)元素 <td>selector:only-child <td>用來定位一個(gè)沒有任何兄弟元素的元素 <td>selector:only-of-type <td>用來定位一個(gè)沒有任何同類型兄弟元素的元素 <td>selector:empty <td>用來定位一個(gè)沒有子級(jí)元素的元素，并且該元素也沒有任何文本內(nèi)容 <td>selector:root <td>用來定位 HTML 頁面中的根元素（<html>）

偽類選擇器	作用

CSS中的結(jié)構(gòu)偽類選擇器是根據(jù)HTML頁面中元素之間的關(guān)系來定位HTML元素，從而減少對(duì)HTML元素的id屬性和class屬性的依賴。

:first-child與:last-child

:first-child偽類用來定義一組兄弟元素的第一個(gè)元素而:last-child偽類則是定位一組兄弟元素的最后一個(gè)元素。

如下示例代碼展示了:first-child偽類和:last-child偽類的用法：

HTML結(jié)構(gòu)如下：

<ul>
????<li>涂山紅紅</li>
????<li>涂山蘇蘇</li>
????<li>涂山蓉蓉</li>
????<li>涂山雅雅</li>
</ul>

CSS代碼如下：

li:first-child?{
????color:?red;
}
li:last-child?{
????color:?blue;
}

代碼運(yùn)行結(jié)果如下圖所示：

:first-child 偽類可以使用:nth-child(n)偽類改寫為:nth-child(1)，而:last-child偽類可以使用:nth-last-child(n)偽類改寫為:nth-last-child(1)。

:first-child偽類和:last-child偽類經(jīng)常會(huì)引起誤解。例如 li:first-child 是用來定位所有<li>元素中第一個(gè)作為子級(jí)元素的，而不是定位<li>元素的第一個(gè)子級(jí)元素。

:first-of-type與:last-of-type

:first-of-type偽類和:last-of-type偽類一個(gè)用于定位一組元素中的第一個(gè)兄弟元素，一個(gè)用來定位最后一個(gè)。

如下示例代碼展示了:first-of-type偽類和:last-of-type偽類的用法：

HTML結(jié)構(gòu)如下：

<h3>狐妖小紅娘</h3>
<p>涂山紅紅</p>
<p>涂山蘇蘇</li>

CSS代碼如下：

p:first-of-type?{
????color:?red;
}

p:last-of-type?{
????color:?blue;
}

代碼運(yùn)行結(jié)果如下圖所示：

:first-of-type偽類與:last-of-type偽類的用法一定要和:first-child偽類與:last-child偽類的用法區(qū)分開。以:first-of-type偽類和:first-child偽類為例來說明：

<li>

:first-of-type偽類是定位一組同類型的兄弟元素中的第一個(gè)元素，不管這個(gè)元素在兄弟元素中的位置如何。

<li>

:first-child偽類是定位一組兄弟元素中的第一個(gè)元素，這些兄弟元素不一定是同類型的。

如果將上述示例代碼中的:first-of-type偽類改寫為:first-child偽類的話，將不會(huì)生效。

:nth-child(n)與:nth-last-child(n)

:nth-child(n)偽類和:nth-last-child(n)偽類都是CSS3中新增的選擇器，這兩個(gè)選擇器的用法基本上是一致的。區(qū)別在于:nth-last-child(n)偽類是倒序方式定位元素，也就是說，:nth-last-child(n)偽類是從一組元素的結(jié)尾開始的。

接下來，主要以:nth-child(n)偽類為例進(jìn)行講解。:nth-child(n)偽類中的n參數(shù)的含義具有3種情況：

<li>

數(shù)字值：任意一個(gè)大于 0 的正整數(shù)。例如 #example td:nth-child(1) 表示定位ID為example的父元素下所有<td>元素中的第一個(gè)元素。

<li>

關(guān)鍵字：odd表示奇數(shù)，等同于:nth-child(2n)；even表示偶數(shù)，等同于:nth-child(2n+1)。

<li>

格式為(an+b)公式：a表示周期的長(zhǎng)度（步長(zhǎng) ），n表示計(jì)數(shù)器（從 0 開始 ），而b則表示偏移值。

如下示例代碼展示了:nth-child(n)偽類(實(shí)現(xiàn)表格隔行換色效果)的用法：

<!DOCTYPE html>
<html>

<head>
????<meta charset="UTF-8">
????<meta http-equiv="X-UA-Compatible" content="IE=edge">
????<meta name="viewport" content="width=device-width, initial-scale=1.0">
????<title>nth-child偽類</title>
????<style>
????????table?{
????????????border-collapse:?collapse;
????????????border-spacing:?0;
????????????width:?100%;
????????}

????????th,
????????td?{
????????????border-top:?1px?solid?lightcoral;
????????????text-align:?center;
????????}

????????/*?最后一行單元格在底部增加一個(gè)邊框效果?*/
????????tr:last-child?td?{
????????????border-bottom:?1px?solid?lightcoral;
????????}

????????/*?實(shí)現(xiàn)隔行換色?*/
????????tr:nth-child(even)?{
????????????background-color:?aquamarine;
????????}
????</style>
</head>

<body>
????<table>
????????<tr>
????????????<th>姓名</th>
????????????<th>區(qū)域</th>
????????</tr>
????????<tr>
????????????<td>梵云飛</td>
????????????<td>西西域</td>
????????</tr>
????????<tr>
????????????<td>歡都落蘭</td>
????????????<td>南國(guó)</td>
????????</tr>
????????<tr>
????????????<td>石寬</td>
????????????<td>北山</td>
????????</tr>
????????<tr>
????????????<td>涂山紅紅</td>
????????????<td>涂山</td>
????????</tr>
????</table>
</body>

</html>

代碼運(yùn)行結(jié)果如下圖所示：

:nth-child(n)偽類的n參數(shù)用法中比較復(fù)雜的是使用(an+b)公式用法，如下示例列舉了一些公式用法：

<li>

:nth-child(5n)：定位元素的序號(hào)是5 [=5×1]、10 [=5×2]、15 [=5×3]等。

<li>

:nth-child(3n+4)：定位元素的序號(hào)是4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4] 等。

<li>

:nth-child(-n+3)：定位元素的序號(hào)是3 [=-0+3]、2 [=-1+3]、1 [=-2+3]。

:nth-child(n)偽類與:nth-last-child(n)偽類和:nth-of-type(n)偽類與:nth-last-of-type(n)偽類的區(qū)別，類似于:first-of-type偽類與:last-of-type偽類和:first-child偽類與:last-child偽類的區(qū)別。

:empty

:empty偽類是用來定位沒有任何子級(jí)元素或文本內(nèi)容的元素，其中文本內(nèi)容包含了空白。但是HTML的注釋是不影響:empty偽類定位元素的。

如下示例代碼展示了:empty偽類的用法：

<!DOCTYPE html>
<html>

<head>
????<meta charset="UTF-8">
????<meta http-equiv="X-UA-Compatible" content="IE=edge">
????<meta name="viewport" content="width=device-width, initial-scale=1.0">
????<title>empty偽類</title>
????<style>
????????body?{
????????????/*?開啟flex布局?*/
????????????display:?flex;
????????}

????????.box?{
????????????background:?pink;
????????????height:?80px;
????????????width:?80px;
????????????margin:?0?20px;
????????}

????????.box:empty?{
????????????background:?lime;
????????}
????</style>
</head>

<body>
????<div></div>
????<div>這個(gè)元素的背景是粉色的</div>
????<div>
????????<!-- 這是一個(gè)注釋 -->
????</div>
</body>

</html>

代碼運(yùn)行結(jié)果如下圖所示：

:root

CSS中的:root偽類選擇器比較簡(jiǎn)單，它代表的就是<html>元素。

如下代碼展示的:root偽類的用法：

:root?{
????height:?100vh;
????width:?100vw;
????background-color:?dodgerblue;
}

代碼運(yùn)行結(jié)果如下圖所示：

3、UI元素狀態(tài)偽類選擇器

使用UI偽類選擇器可以根據(jù)元素的狀態(tài)匹配元素，下方列表將簡(jiǎn)單總結(jié)這類選擇器：

<td>：enabled <td>選擇啟用狀態(tài)的元素 <td>：disabled <td>選擇禁用狀態(tài)的元素 <td>：checked <td>選擇被選中的input元素（只用于單選按鈕和復(fù)選框） <td>：default <td>選擇默認(rèn)元素 <td>：valid <td>根據(jù)輸入驗(yàn)證選擇有效或者無效的input元素 <td>：in-range/：out-of-range <td>選擇在制定范圍之內(nèi)或者職位受限的input元素 <td>：required/：optional <td>根據(jù)是否允許：required屬性選擇input元素

選擇器	說明

4、輸入偽類選擇器

關(guān)于表單輸入的偽類，主要介紹三種常用的，具體如下：

<li>

:enabled和:disabled

<li>

:read-only和:read-write

<li>

:checked

:enabled和:disabled

:enabled和:disabled一這組偽類選擇器分別表示禁用狀態(tài)與可用狀態(tài)，這組為了使完全對(duì)立的。

:enabled偽類的實(shí)際用處并不大，因?yàn)榇蠖嘣啬J(rèn)都是可用的，所以寫不寫意義并不大。

如下代碼展示了:enabled和:disabled的用法：

<!DOCTYPE html>
<html>

<head>
??<meta charset="UTF-8">
??<meta http-equiv="X-UA-Compatible"
        content="IE=edge">
??<meta name="viewport"
        content="width=device-width, initial-scale=1.0">
??<title>:enabled和:disabled的用法</title>
??<style>
????input:enabled?{
??????outline:?none;
????}

????input:disabled?{
??????/*?禁用狀態(tài)背景為灰色?*/
??????background-color:?gray;
????}
??</style>
</head>

<body>
??<input type="text"
         placeholder="可用狀態(tài)">
??<input type="text"
         disabled
         placeholder="禁用狀態(tài)">
</body>

</html>

代碼運(yùn)行結(jié)果如下所示：

由上圖我們看到禁用狀態(tài)的<input>的背景顏色為灰色。

:read-only和:read-write

:read-only和:read-write一這組偽類選擇器分別表示只讀和可寫狀態(tài)，同樣的:read-write也很雞肋，因?yàn)槟J(rèn)就是可讀寫，示例代碼如下所示：

<!DOCTYPE html>
<html>

<head>
??<meta charset="UTF-8">
??<meta http-equiv="X-UA-Compatible"
        content="IE=edge">
??<meta name="viewport"
        content="width=device-width, initial-scale=1.0">
??<title>:read-only和:read-write</title>
??<style>
????input:read-write?{
??????outline:?none;
????}

????/*?只讀狀態(tài)?*/
????input:read-only?{
??????color:?red;
??????outline:?none;
????}
??</style>
</head>

<body>
??<input type="text"
         value="讀寫狀態(tài)">
??<input type="text"
         readonly
         value="只讀狀態(tài)">
</body>

</html>

代碼運(yùn)行結(jié)果如下所示：

我們可以看到，只讀的<input>的文字顏色為紅色。

:checked

:checked偽類可以說是眾多偽類選擇器中使用頻率很高的一個(gè)偽類選擇器，該選擇器表示選中的狀態(tài)，就比如下面這個(gè)例子：

<!DOCTYPE html>
<html>

<head>
??<meta charset="UTF-8">
??<meta http-equiv="X-UA-Compatible"
        content="IE=edge">
??<meta name="viewport"
        content="width=device-width, initial-scale=1.0">
??<title>checked偽類</title>
??<style>
????input:checked?{
??????/*?為選中的增加陰影?*/
??????box-shadow:?2px?2px?2px?2px?lightcoral;
????}
??</style>
</head>

<body>
??<input type="checkbox">
??<input type="checkbox"
         checked>
</body>

</html>

關(guān)于:checked偽類，最佳實(shí)踐是配合<label>元素來實(shí)現(xiàn)，現(xiàn)在我們就通過:checked和<label>元素來實(shí)現(xiàn)一個(gè)開關(guān)的效果。

示例代碼如下：

<!DOCTYPE html>
<html>

<head>
??<meta charset="UTF-8">
??<meta http-equiv="X-UA-Compatible"
        content="IE=edge">
??<meta name="viewport"
        content="width=device-width, initial-scale=1.0">
??<title>開關(guān)</title>
??<style>
????[type="checkbox"]?{
??????width:?44px;
??????height:?26px;
??????position:?absolute;
??????opacity:?0;
??????pointer-events:?none;
????}

????/*?開關(guān)樣式?*/
????.cs-switch?{
??????display:?inline-block;
??????width:?44px;
??????height:?26px;
??????border:?2px?solid;
??????border-radius:?26px;
??????background-color:?currentColor;
??????box-sizing:?border-box;
??????color:?silver;
??????transition:?all?.2s;
??????cursor:?pointer;
????}

????.cs-switch::before?{
??????content:?"";
??????display:?block;
??????width:?22px;
??????height:?22px;
??????border-radius:?50%;
??????background-color:?#fff;
??????transition:?margin-left?.2s;
????}


????:checked+.cs-switch?{
??????color:?blueviolet;
????}

????/*?選中移動(dòng)?*/
????:checked+.cs-switch::before?{
??????margin-left:?18px;
????}

????/*?禁用狀態(tài)?*/
????:disabled+.cs-switch?{
??????opacity:?.4;
??????cursor:?not-allowed;
????}
??</style>
</head>

<body>
??<!-- 普通狀態(tài) -->
??<input type="checkbox"
         id="switch">
??<label
         for="switch"></label>
??<!-- 選中狀態(tài) -->
??<input type="checkbox"
         id="switch1"
         checked>
??<label
         for="switch1"></label>
??<!-- 禁用狀態(tài) -->
??<input type="checkbox"
         id="switch2"
         disabled>
??<label
         for="switch2"></label>
??<!-- 選中禁用狀態(tài) -->
??<input type="checkbox"
         id="switch3"
         checked
         disabled>
??<label
         for="switch3"></label>
</body>

</html>

運(yùn)行效果如下所示：

5、邏輯組合偽類

:not()否定的偽類

<li>

優(yōu)先級(jí)為0，優(yōu)先級(jí)由括號(hào)中的表達(dá)式?jīng)Q定； :not(p)由p決定

<li>

可以不斷的級(jí)聯(lián)；
input:not(:disabled):not(:read-only) {} ;表示處于不禁用，也不處于只讀的狀態(tài)

<li>

不可出現(xiàn)多個(gè)表達(dá)式，也不支持選擇符；
li:not(li, od); 尚未支持

:not()的巨大的用處在于告別重置的問題；

重置web中的樣式，就好比我們?cè)陧?xiàng)目中經(jīng)常使用到的：添加.active類名來控制樣式的顯示與隱藏/改變樣式，往常的寫法都是：

.cs_li?{
	display:?none;
}
.cs_li.active?{
	display:?block;
}

而我們可以使用:not()偽類，可以更好的實(shí)現(xiàn)：

.cs_li:not(.active)?{
	display:?none;
}

在列表中的設(shè)置<li>的邊框時(shí)也可使用其:not()

.cs_li:not(:nth-of-type(5n)){
	margin-right:?10px;?//?除5的倍數(shù)項(xiàng)都設(shè)置右邊的外邊距
}

:is()的作用是簡(jiǎn)化選擇器

平時(shí)我們開發(fā)中經(jīng)常會(huì)用到類似下面的語法：

.cs_li_a?>?img,
.cs_li_b?>?img,
.cs_li_c?>?img?{
	display:?none;
}

使用:is()簡(jiǎn)化可寫成：

:is(.cs_li_a,?.cs_li_b,?.cs_li_c)?>?img?{
	display:?none;
}

還有一種嵌套之間的關(guān)系，相互嵌套，交叉組合得出結(jié)論；如下方所示

ol?ol?li,
ol?ul?li,?
ul?ul?li,
ul?ol?li?{
	margin-left:?20px;
}

使用:is()偽類強(qiáng)化，則只需要幾行代碼：

:is(ol,?ul)?:is(ol,?ul)?li{
	margin-left:?20px;
}

<strong>:where()</strong>

:where()與上方的:is()相同，唯一不同的是級(jí)別永遠(yuǎn)為0，也不受括號(hào)里面的表達(dá)式影響；

使用的方法與:is()完全相同，但優(yōu)先級(jí)永遠(yuǎn)是0；底下的括號(hào)中的優(yōu)先級(jí)完全被忽略，倆句是同一個(gè)優(yōu)先級(jí)，并且級(jí)別等同于.conten選擇器

:where(.article,?section)?.conten?{}
:where(#article,?#section)?.conten?{

（學(xué)習(xí)視頻分享：web前端入門）

以上是css偽選擇器學(xué)習(xí)之偽類選擇器解析的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！