在先前的文章《css偽選擇器學習之偽元素選擇器解析》中，我們學習了偽元素選擇器，而今天我們詳細了解偽類選擇器，希望對大家有所幫助！
#偽類選擇器 是一種允許通過未包含在HTML元素的狀態資訊來定位HTML元素的用法。 偽類選擇器 的具體用法就是在現有的選擇器上增加關鍵字，表示定位的HTML元素的狀態資訊。 【推薦學習：css視訊教學】
透過偽類，開發者可以設定元素的動態狀態，例如懸停（hover）、點擊（active）以及文件中不能通過其它選擇器選擇的元素（這些元素沒有ID 或class 屬性），例如第一個子元素（first-child）或最後一個子元素（last-child）。
例如:hover偽類別選擇器可以用來在使用者將滑鼠懸停在按鈕上時改變按鈕的顏色。如下範例程式碼所示：
/* 所有用户指针悬停的按钮 */
button:hover {
color: blue;
}偽類別的名稱不區分大小寫，但需要以冒號:開頭。另外，偽類別需要與CSS 中的選擇器結合使用，語法格式如下：
选择器:伪类 {
属性 : 属性值;
}#偽類選擇器 的特定語法格式為:偽類別，這裡一定不要忘記:。
CSS 中提供了各種各樣的偽類，如下表所示：
| 選擇器 | 範例 | 範例描述 |
|---|---|---|
| #:active | #a :active | 符合被點擊的連結 |
| :checked | input:checked | 符合處於選取狀態的<input> |
| :disabled | input:disabled | 符合每個被停用的<input> 元素 |
| #:empty | p:empty | 符合任何沒有子元素的 元素 |
| :enabled | #input:enabled | 符合每個已啟用的<input> 元素 |
| :first-child | ##p:first-child符合父元素中的第一個子元素 | |
| p:first-of-type | 符合父元素中的第一個 | |
| input:focus | 符合獲得焦點的<input> 元素 | |
| a:hover | #符合滑鼠懸停其上的元素 | |
| #input:in-range | 符合具有指定取值範圍的<input> 元素 | |
| input:invalid | 符合所有具有無效值的<input> 元素 | |
| p:lang(it) | #符合每個lang 屬性值以"it" 開頭的 | |
| p:last-child | 符合父元素中的最後一個子元素 | |
| #p:last-of-type | ##匹配父元素中的最後一個 元素 |
|
| a:link | 符合所有未被存取的連結 | |
| :not(p) | 符合每個非 元素的元素 |
|
| p:nth-child(2) | 符合父元素中的第二個子元素 | |
| #:nth-last-child(n) | p:nth-last-child(2) | |
| #:nth-last-of-type(n) | p:nth-last-of-type(2) | |
| :nth-of-type(n) | p:nth-of-type(2) | |
| :only-of-type | p:only-of-type | |
| :only-child | p:only-child | |
| :optional | input:optional | |
| #:out-of-range | input:out-of-range | |
| :read-only | input:read-only | |
| #:read-write | input:read-write | |
| # :required | input:required | |
| ##:root | root | |
| :target | #news:target |
偽類別選擇器的分類
CSS 版本從第一版本發展到第三版本，提供的偽類別選擇器 的數量已經很龐大了。尤其CSS3版本新增了大量的偽類選擇器 。
偽類選擇器 的數量這麼多，為了更好地梳理偽類選擇器 ，我們可以按照用途的不同分為如下5 種類型：
使用者行為偽類：指與使用者行為相關的一些偽類，例如，懸停:hover、按下:active#以及取得焦點:focus等。
URL定位偽類別：用於定位HTML頁面中的元素
<li>#輸入偽類別：與表單控制項相關的偽類別
<li>結構偽類：主要用於定位目標元素
<li>邏輯組合偽類：用於邏輯運算的，例如:not( )，就表示不是某元素。
1、使用者行為偽類--動態偽類選擇器
之所以稱為動態偽類選擇器，是因為它們根據條件的改變來匹配元素，是相對於文件的固定狀態來說的。隨著JavaScript廣泛用於修改文件內容和元素狀態，動態選擇器和靜態選擇器之間的界限越來越模糊，不過，動態偽類選擇器仍然是一類比較特別的選擇器。
：link選擇器匹配超鏈接，：visited選擇器匹配用戶已經訪問過超鏈接。
使用：visited選擇器可以套用到連結元素的屬性不多。你可以改變顏色和字體，不過僅此而已。
提示：：visited選擇器匹配用戶在所有頁面訪問過的href屬性為URL的任意鏈接，而不只是你的頁面。 ：visited最常見的用法就是針對已造訪的連結套用某種樣式，從而讓它們跟未造訪的連結有所區別。例如我們看新聞，看過的新聞和沒有看過的新聞在首頁列表呈現的狀態是不一樣的，便於我們區分。
：hover選擇器符合使用者滑鼠懸停在其上的任意元素。
：active選擇器符合目前被使用者啟動的元素（一般情況下為滑鼠點選該元素）。
：focus選擇器符合獲得焦點的元素，常用於 input 元素。
2、結構性偽類選擇器
#使用結構性偽類選擇器能夠根據元素在文件中的位置選擇元素。這類選擇器都有一個冒號字元前綴（：），例如：empty。他們可以單獨使用，也可以跟其他選擇器組合使用，如p：empty。
結構偽類別選擇器類別選擇器包含的內容如下表所示：
| 偽類選擇器 | 作用 |
|---|---|
selector:first-child |
用來定位一組兄弟元素中的第一個元素 |
selector:last-child |
#用來定位一組兄弟元素中的最後一個元素 |
selector:nth-child(n) |
用來定位一組兄弟元素中的第n個元素 |
selector:nth-last-child(n) |
用來定位一組兄弟元素中倒序方式的第n個元素 |
selector:first-of-type |
用來定位一組相同類型的兄弟元素中的第一個元素 |
selector:last-of-type |
用來定位一組同類型的兄弟元素中的最後一個元素 |
selector: nth-of-type(n) |
用來定位一組同類型的兄弟元素中的第n個元素 |
selector: nth-last-of-type(n) |
用來定位一組同類型的兄弟元素中倒序方式的第n個元素 |
selector:only-child |
用來定位一個沒有任何兄弟元素的元素 |
selector:only-of-type |
用來定位一個沒有任何同類型兄弟元素的元素 |
#selector:empty | ## 用來定位一個沒有子級元素的元素，且該元素也沒有任何文字內容|
#selector:root | 用來定位HTML 頁面中的根元素（） |
元素中的第一个元素。<li> 关键字： 格式为 如下示例代码展示了 nbsp;html>
<meta>
<meta>
<meta>
<title>nth-child伪类</title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th,
td {
border-top: 1px solid lightcoral;
text-align: center;
}
/* 最后一行单元格在底部增加一个边框效果 */
tr:last-child td {
border-bottom: 1px solid lightcoral;
}
/* 实现隔行换色 */
tr:nth-child(even) {
background-color: aquamarine;
}
</style>
登入後複製
代码运行结果如下图所示：
:empty
如下示例代码展示了 nbsp;html>
<meta>
<meta>
<meta>
<title>empty伪类</title>
<style>
body {
/* 开启flex布局 */
display: flex;
}
.box {
background: pink;
height: 80px;
width: 80px;
margin: 0 20px;
}
.box:empty {
background: lime;
}
</style>
<div></div>
<div>这个元素的背景是粉色的</div>
<div>
<!-- 这是一个注释 -->
</div>
登入後複製 代码运行结果如下图所示：
:root CSS中的 如下代码展示的 :root {
height: 100vh;
width: 100vw;
background-color: dodgerblue;
}登入後複製 代码运行结果如下图所示：
3、UI元素状态伪类选择器 使用UI伪类选择器可以根据元素的状态匹配元素，下方列表将简单总结这类选择器：
4、输入伪类选择器 关于表单输入的伪类，主要介绍三种常用的，具体如下：
:enabled和:disabled
如下代码展示了 nbsp;html>
<meta>
<meta>
<meta>
<title>:enabled和:disabled的用法</title>
<style>
input:enabled {
outline: none;
}
input:disabled {
/* 禁用状态背景为灰色 */
background-color: gray;
}
</style>
<input>
<input>
登入後複製 代码运行结果如下所示： 由上图我们看到禁用状态的 :read-only和:read-write
nbsp;html>
<meta>
<meta>
<meta>
<title>:read-only和:read-write</title>
<style>
input:read-write {
outline: none;
}
/* 只读状态 */
input:read-only {
color: red;
outline: none;
}
</style>
<input>
<input>
登入後複製 代码运行结果如下所示： 我们可以看到，只读的 :checked
nbsp;html>
<meta>
<meta>
<meta>
<title>checked伪类</title>
<style>
input:checked {
/* 为选中的增加阴影 */
box-shadow: 2px 2px 2px 2px lightcoral;
}
</style>
<input>
<input>
登入後複製 关于 示例代码如下： nbsp;html>
<meta>
<meta>
<meta>
<title>开关</title>
<style>
[type="checkbox"] {
width: 44px;
height: 26px;
position: absolute;
opacity: 0;
pointer-events: none;
}
/* 开关样式 */
.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;
}
/* 选中移动 */
:checked+.cs-switch::before {
margin-left: 18px;
}
/* 禁用状态 */
:disabled+.cs-switch {
opacity: .4;
cursor: not-allowed;
}
</style>
<!-- 普通状态 -->
<input>
<label></label>
<!-- 选中状态 -->
<input>
<label></label>
<!-- 禁用状态 -->
<input>
<label></label>
<!-- 选中禁用状态 -->
<input>
<label></label>
登入後複製 运行效果如下所示：
5、逻辑组合伪类
优先级为0，优先级由括号中的表达式决定； 可以不断的级联； 不可出现多个表达式，也不支持选择符； :not()的巨大的用处在于告别重置的问题； 重置web中的样式，就好比我们在项目中经常使用到的：添加 .cs_li {
display: none;
}
.cs_li.active {
display: block;
}登入後複製 而我们可以使用 .cs_li:not(.active) {
display: none;
}登入後複製 在列表中的设置 .cs_li:not(:nth-of-type(5n)){
margin-right: 10px; // 除5的倍数项都设置右边的外边距
}登入後複製
平时我们开发中经常会用到类似下面的语法： .cs_li_a > img,
.cs_li_b > img,
.cs_li_c > img {
display: none;
}登入後複製 使用 :is(.cs_li_a, .cs_li_b, .cs_li_c) > img {
display: none;
}登入後複製 还有一种嵌套之间的关系，相互嵌套，交叉组合得出结论；如下方所示 ol ol li,
ol ul li,
ul ul li,
ul ol li {
margin-left: 20px;
}登入後複製 使用 :is(ol, ul) :is(ol, ul) li{
margin-left: 20px;
}登入後複製
使用的方法与:is()完全相同，但优先级永远是0；底下的括号中的优先级完全被忽略，俩句是同一个优先级，并且级别等同于 :where(.article, section) .conten {}
:where(#article, #section) .conten {登入後複製 （学习视频分享：web前端入门） |
以上是css偽選擇器學習之偽類選擇器解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
