偽類選擇器在CSS中起到的作用可以說(shuō)是至關(guān)重要的，如果CSS沒(méi)有偽類選擇器，有很多效果都要借助js來(lái)完成，這樣不僅代碼量增加，維護(hù)起來(lái)你難度也大。這樣程序員的工作量大，也違背了CSS誕生的作用，就是提高開(kāi)發(fā)效率，在同等的世間里完成更高質(zhì)量的開(kāi)發(fā)。
偽類選擇器包括偽類和偽類對(duì)象選擇器，偽類選擇器以冒號(hào)( : )作為前綴標(biāo)識(shí)符。 冒號(hào)前可以添加選擇符，限定偽類應(yīng)用的范圍，冒號(hào)后為偽類和偽類對(duì)象名，冒號(hào)前后沒(méi)有空格，否則將認(rèn)為類選擇器，如圖所示。
下面表格包含了大部分偽類選擇器：
| 偽類選擇器 | |
| 動(dòng)態(tài)偽類 | |
| :link | 鏈接沒(méi)有被訪問(wèn)前的樣式效果 |
| :visited | 鏈接被訪問(wèn)后的樣式效果 |
| :hover | 鼠標(biāo)懸停在元素上面時(shí)的樣式效果 |
| :active | 點(diǎn)擊元素時(shí)的樣式效果，即按下鼠標(biāo)左鍵時(shí)發(fā)生的樣式 |
| :focus | 用于元素成為焦點(diǎn)時(shí)的樣式效果，常用與表單元素 |
| 結(jié)構(gòu)偽類 | |
| :first-child | 選擇某個(gè)元素下的第一個(gè)子元素 |
| :last-child | 選擇某個(gè)元素下的最后一個(gè)子元素 |
| :nth-child() | 選擇某個(gè)元素下的一個(gè)或多個(gè)特定的子元素 |
| :nth-last-child() | 選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素，從后往前數(shù) |
| :nth-of-type() | 選擇指定的元素 |
| :nth-last-of-type() | 選擇指定的元素，從后往前數(shù) |
| :first-of-type | 選擇一個(gè)父級(jí)元素下的第一個(gè)同類型子元素 |
| :last-of-type | 選擇一個(gè)父級(jí)元素下的第一個(gè)同類型子元素，從后往前數(shù) |
| :only-child | 選擇的元素是它父元素的唯一 一個(gè)子元素 |
| :only-of-type | 選擇一個(gè)元素是上級(jí)元素下唯一相同類型的子元素 |
| :empty | 選擇的元素里面沒(méi)有任何內(nèi)容（空標(biāo)簽） |
| 否定偽類 | |
| :not() | 排查或者過(guò)濾掉特定元素 |
| 狀態(tài)偽類 | |
| :enabled | 選擇匹配指定范圍內(nèi)所有可用UI(用戶界面)元素 |
| :disabled | 選擇匹配指定范圍內(nèi)所有不可用UI(用戶界面)元素 |
| :checked | 選擇匹配指定范圍內(nèi)所有可用UI(用戶界面)元素 |
| 目標(biāo)偽類 | |
| :target | 選擇匹配父元素的所有元素，且匹配元素被相關(guān)URL指向 |
動(dòng)態(tài)偽類
動(dòng)態(tài)偽類是一類行為類樣式，這些樣式不存在于HTML中，只有當(dāng)用戶于頁(yè)面進(jìn)行交互才能體現(xiàn)出來(lái)。動(dòng)態(tài)偽類偽類選擇器包括兩種形式：
錨點(diǎn)偽類，這是一種在鏈接中最常見(jiàn)的樣式，如:link、:visited。
行為偽類，也成用戶操作偽類，如:hover、:active、:focus。
為了教學(xué)簡(jiǎn)單，我寫為內(nèi)嵌式，在實(shí)際應(yīng)用中不建議各位使用內(nèi)嵌式。
:link
設(shè)置超鏈接在跳轉(zhuǎn)前的樣式，用法如下：
<a href="#" target="_blank">跳轉(zhuǎn)</a>
想要設(shè)置上面超鏈接鏈接前的樣式為字體顏色紅色、無(wú)下滑線，可以這樣設(shè)置。
:visited
這偽類于:link剛好相反，:link是鏈接前的樣式，而:visited是鏈接后的樣式，也就是訪問(wèn)過(guò)后的超鏈接樣式。
<a href="#" target="_blank">跳轉(zhuǎn)</a> :li
在日常的學(xué)習(xí)中可能大家都是把鏈接前后一起書寫的，方便快捷，還符合語(yǔ)義性；這就導(dǎo)致很多同學(xué)不知道這兩個(gè)偽類有個(gè)覆蓋效果的問(wèn)題。下面的例子可以幫助你們有個(gè)大概的了解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a:link {
color: red;
text-decoration: none;
}
a:visited {
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="login.html" target="_blank">跳轉(zhuǎn)</a>
</body>
</html>上面這段代碼就是HTML頁(yè)面鏈接到login頁(yè)面的跳轉(zhuǎn)鏈接，運(yùn)行后效果圖是這樣的：
:hover
:hover偽類選擇器用于用戶把鼠標(biāo)移動(dòng)到元素上面時(shí)的樣式效果。不僅用于超鏈接還可以適用于很多元素上，比如說(shuō)按鈕，當(dāng)你把鼠標(biāo)移動(dòng)到上面的時(shí)候，你會(huì)發(fā)現(xiàn)按鈕的北背景色變深色了，或者改變顏色了，這就是通過(guò):hover來(lái)完成的，當(dāng)然還有其他方法進(jìn)行設(shè)置，可毫無(wú)疑問(wèn):hover是最簡(jiǎn)單快捷的方法。這里我先介紹在超鏈接的使用技巧，在進(jìn)行擴(kuò)展使用它來(lái)更改鼠標(biāo)移動(dòng)到元素上面后的效果。
如果你想要在鼠標(biāo)懸停在a標(biāo)簽元素上，讓元素改變顏色，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a:hover {
color: blue;
}
</style>
</head>
<body>
<a href="#" target="_blank">跳轉(zhuǎn)</a>
</body>
</html>
擴(kuò)展
結(jié)構(gòu)代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 50px;
line-height: 50px;
color: red;
background: orange;
text-align: center;
}
</style>
</head>
<body>
<div>:hover</div>
</body>
</html>當(dāng)想要的效果是，當(dāng)鼠標(biāo)移動(dòng)到div元素上時(shí)，背景色改為黑色、字體改為白色，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 50px;
line-height: 50px;
color: red;
background: orange;
text-align: center;
transition: all 1s;
}
div:hover {
background: black;
color: white;
}
</style>
</head>
<body>
<div>:hover</div>
</body>
</html>:active
:active用于用戶單擊元素時(shí)的樣式效果。多用于表單控件，當(dāng)用戶點(diǎn)擊時(shí)有個(gè)按下按鈕的效果。同理這個(gè)我放在擴(kuò)展區(qū)域。
當(dāng)點(diǎn)擊超鏈接我想要更改超鏈接字體的顏色，實(shí)現(xiàn)代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a {
color: red;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<a href="#" target="_blank">跳轉(zhuǎn)</a>
</body>
</html>擴(kuò)展
這個(gè)實(shí)例是用div模仿一個(gè)按鈕，html自帶的按鈕樣式一言難盡，模仿的好進(jìn)行樣式控制。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background: green;
font-size: 24px;
font-weight: bold;
border-radius: 15px;
margin: 150px auto;
cursor: pointer;
}
div:active {
background: orange;
color: white;
}
</style>
</head>
<body>
<div>
按鈕
</div>
</body>
</html>:focus
:focus 多用元素成為焦點(diǎn)時(shí)的樣式效果，這個(gè)經(jīng)常用與表單控件元素上。
結(jié)構(gòu)代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="#" method="post"> <input type="text"> </form> </body> </html>
當(dāng)想input獲取焦點(diǎn)后，背景色為#CCC，實(shí)現(xiàn)代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
form input:focus {
background: #CCC;
}
</style>
</head>
<body>
<form action="#" method="post">
<input type="text">
</form>
</body>
</html>可以看到input獲取焦點(diǎn)后背景色改為目標(biāo)顏色的樣式效果了。
注意事項(xiàng)：
（1）上述偽類選擇器遵循順序原則，也就是 link 到 visited 到 hover 再到 active 偽類。
（2）hover和active又被列入到用戶行為偽類中。
first-child
偽類 first-child 能夠匹配指定父元素下的第一個(gè)子元素，例如ul li:first-child能夠匹配<ul>元素下的第一個(gè)<li>元素，示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:first-child { /*匹配<ul>下的第一個(gè)<li>標(biāo)簽*/
color: red;
}
</style>
</head>
<body>
<ul>
<li>dotcpp編程</li>
<li>dotcpp編程</li>
<li>dotcpp編程</li>
</ul>
</body>
</html>運(yùn)行結(jié)果：
ast-child
與 first-child 類似，偽類 last-child 能夠匹配指定父元素下的最后一個(gè)子元素，例如ul li:last-child能夠匹配<ul>元素下的最后一個(gè)<li>元素，示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:last-child { /*匹配<ul>下的最后一個(gè)<li>標(biāo)簽*/
color: red;
}
</style>
</head>
<body>
<ul>
<li>dotcpp編程</li>
<li>dotcpp編程</li>
<li>dotcpp編程</li>
</ul>
</body>
</html>運(yùn)行結(jié)果：
nth-child
偽類 nth-child 是 CSS3 中新增的，它可以匹配指定元素下的第 n 個(gè)子元素，例如ul li:nth-child(2)能夠匹配<ul>元素下的第二個(gè)<li>元素，示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(2) { /*匹配<ul>下的第二個(gè)<li>標(biāo)簽*/
color: red;
}
</style>
</head>
<body>
<ul>
<li>dotcpp編程</li>
<li>dotcpp編程</li>
<li>dotcpp編程</li>
</ul>
</body>
</html>運(yùn)行結(jié)果：
C語(yǔ)言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競(jìng)賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點(diǎn)擊了解：
一點(diǎn)編程也不會(huì)寫的：零基礎(chǔ)C語(yǔ)言學(xué)練課程
解決困擾你多年的C語(yǔ)言疑難雜癥特性的C語(yǔ)言進(jìn)階課程
從零到寫出一個(gè)爬蟲(chóng)的Python編程課程
只會(huì)語(yǔ)法寫不出代碼？手把手帶你寫100個(gè)編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競(jìng)賽課入門課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程