css 偽類是用于向某些選擇器添加特殊的效果，是動態(tài)的，指當(dāng)前元素所處的狀態(tài)或者特性。只有一個元素達(dá)到一個特定狀態(tài)時，它可能得到一個偽類的樣式；當(dāng)狀態(tài)改變時，它又會失去這個樣式。
接下來介紹一些大家可能還不熟悉的一些偽類及其用例，希望對大家日后有所幫助。
:first-child
選擇器匹配其父元素中的第一個子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.skills li:first-child {
color: red;
}
</style>
</head>
<body>
<ul class="skills">
<li>我要學(xué)英語</li>
<li>我要買汽車</li>
<li>我要買房子</li>
<li>我要當(dāng)老板</li>
</ul>
</body>
</html>
:last-child
用于匹配父元素中最后一個子元素
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.skills li:last-child {
color: #fff;
background-color: blue;
}
</style>
</head>
<body>
<ul class="skills">
<li>我要學(xué)英語</li>
<li>我要買汽車</li>
<li>我要買房子</li>
<li>我要當(dāng)老板</li>
</ul>
</body>
</html>
::first-line
選擇文本的第一行
<!DOCTYPE html>
<html lang="en">
<head>
<style>
article {
width: 20em;
}
article::first-line {
color: red;
}
</style>
</head>
<body>
<article>
歲月悠悠，來去匆匆。情似水，遠(yuǎn)赴湖海。破碎如鏡，就只能將裂痕永遠(yuǎn)留下不堪的痕跡。你匆匆的來，就這樣匆匆的遠(yuǎn)去。匆匆的片刻，匆匆的別離，留下我一腔的破碎情愁，在記憶的深處隨歲月的變遷而悸動疼痛。
</article>
</body>
</html>
::first-letter
選擇這一行的第一個字 CSS 偽元素 ::first-letter會選中某塊級元素第一行的第一個字母。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
article {
width: 20em;
}
article::first-letter {
color: red;
font-size: 30;
font-weight: bold;
}
</style>
</head>
<body>
<article>
歲月悠悠，來去匆匆。情似水，遠(yuǎn)赴湖海。破碎如鏡，就只能將裂痕永遠(yuǎn)留下不堪的痕跡。你匆匆的來，就這樣匆匆的遠(yuǎn)去。匆匆的片刻，匆匆的別離，留下我一腔的破碎情愁，在記憶的深處隨歲月的變遷而悸動疼痛。
</article>
</body>
</html>
::selection
::selection 偽元素應(yīng)用于文檔中被用戶高亮的部分（比如使用鼠標(biāo)或其他選擇設(shè)備選中的部分）。
article {
width: 20em;
font-size: 24px;
}
article::selection {
color: red;
}
:root
:root 偽類匹配文檔樹的根元素。對于 HTML 來說，:root 表示 `<html>` 元素，除了優(yōu)先級更高之外，與 html 選擇器相同。在聲明全局 CSS 變量時 :root 會很有用：
:root {
--main-color: red;
--pane-padding: 5px 42px;
}
:empty
:empty 偽類代表沒有子元素的元素。子元素只可以是元素節(jié)點(diǎn)或文本（包括空格）,注釋或處理指令都不會產(chǎn)生影響。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div:empty {
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<div>第二個div</div>
<div>第三個div</div>
</body>
</html>
:empty偽類僅作用于第一個div因?yàn)樗膬?nèi)容是空的。
:only-child
:only-child 匹配沒有任何兄弟元素的元素.等效的選擇器還可以寫成:first-child、:last-child、:nth-child(1)、:nth-last-child(1),當(dāng)然,前者的權(quán)重會低一點(diǎn)。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div:only-child {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div>
<div>我沒兄弟</div>
</div>
<div>第二個div</div>
<div>第三個div</div>
</body>
</html>
:first-of-type
:first-of-type表示一組兄弟元素中其類型的第一個元素。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div:first-of-type {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div>第一個div</div>
<div>第二個div</div>
<div>第三個div</div>
</body>
</html>
:last-of-type
選擇指定類型的最后一個子元素
:last-of-type CSS 偽類 表示了在（它父元素的）子元素列表中，最后一個給定類型的元素。當(dāng)代碼類似Parent tagName:last-of-type的作用區(qū)域包含父元素的所有子元素中的最后一個選定元素，也包括子元素的最后一個子元素并以此類推。
// 最后一個元素的背景色為綠色，文字顏色為白色
div:last-of-type {
color: white;
background-color: green;
}
nth-of-type()
選擇指定類型的子元素
:nth-of-type() 這個 CSS 偽類是針對具有一組兄弟節(jié)點(diǎn)的標(biāo)簽, 用 n 來篩選出在一組兄弟節(jié)點(diǎn)的位置。
// 第二個元素的背景顏色為橘色，文字顏色為白色
div:nth-of-type(2) {
color: white;
background-color: orange;
}
:nth-last-of-type()
在列表末尾選擇類型的子元素
:nth-last-of-type(an+b) 這個 CSS 偽類 匹配那些在它之后有 an+b-1 個相同類型兄弟節(jié)點(diǎn)的元素，其中 n 為正值或零值。它基本上和 :nth-of-type 一樣，只是它從結(jié)尾處反序計(jì)數(shù)，而不是從開頭處。
// 倒數(shù)第二個元素背景顏色為橘色、文字顏色為白色
div:nth-last-of-type(2) {
color: white;
background-color: orange;
}
:link
選擇一個未訪問的超鏈接
:link偽類選擇器是用來選中元素當(dāng)中的鏈接。它將會選中所有尚未訪問的鏈接，包括那些已經(jīng)給定了其他偽類選擇器的鏈接（例如:hover選擇器，:active選擇器，:visited選擇器）。
為了可以正確地渲染鏈接元素的樣式，:link偽類選擇器應(yīng)當(dāng)放在其他偽類選擇器的前面，并且遵循LVHA的先后順序，即：:link — :visited — :hover — :active。:focus偽類選擇器常伴隨在:hover偽類選擇器左右，需要根據(jù)你想要實(shí)現(xiàn)的效果確定它們的順序。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a:link {
color: orangered;
}
</style>
</head>
<body>
<a href="https://www.toutiao.com/">今日頭條</a>
<br/>
<a href="www.baidu.com">百度一下</a>
</body>
</html>
a標(biāo)簽的:link 偽類對未訪問的連接顏色為橘色 ，“今日頭條”我已經(jīng)訪問了，顏色切換為了常見的藍(lán)色，“百度一下”未訪問文字顏色還是橘色的。
:checked
選擇一個選中的復(fù)選框
:checked CSS 偽類選擇器表示任何處于選中狀態(tài)的radio(`<input type="radio">`), checkbox (`<input type="checkbox">`) 或("select") 元素中的option HTML元素("option")。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input:checked {
box-shadow: 0 0 0 3px red;
}
</style>
</head>
<body>
<input type="checkbox" />
</body>
</html>
:valid
選擇一個有效的元素
:valid CSS 偽類表示內(nèi)容驗(yàn)證正確的`<input>` 或其他 `<form>` 元素。這能簡單地將校驗(yàn)字段展示為一種能讓用戶辨別出其輸入數(shù)據(jù)的正確性的樣式。
:invalid
選擇一個無效的元素
:invalid CSS 偽類 表示任意內(nèi)容未通過驗(yàn)證的 `<input>` 或其他 `<form>` 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input {
font-size: 18px;
outline: none !important;
}
/* 有效時顏色、邊框?yàn)榫G色 */
input:valid {
color: green;
border: 2px solid green;
}
/* 無效時顏色、邊框?yàn)榧t色 */
input:invalid {
color: red !important;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="email">
</body>
</html>
:lang()
通過指定的lang值選擇一個元素
:lang() CSS 偽類基于元素語言來匹配頁面元素。通過html的lang屬性設(shè)置
<!DOCTYPE html>
<html lang="en"> // 當(dāng)前html為英文
<head>
<style>
div:lang(en) { // 語言是英文的時候設(shè)置文字顏色為紅色
color: red;
}
</style>
</head>
<body>
<div>my name is susu</div>
<div>我的名字叫蘇蘇</div>
</body>
</html>
:not()
用來匹配不符合一組選擇器的元素
CSS 偽類 :not() 用來匹配不符合一組選擇器的元素。由于它的作用是防止特定的元素被選中，它也被稱為反選偽類（negation pseudo-class）。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
font-size: 18px;
}
.main :not(p) {
/* 不是p標(biāo)簽的文字顏色都是紅色 */
color: red;
}
</style>
</head>
<body>
<div class="main">
<div>我是第一個div</div>
<div>我是第二個div</div>
<p>我是一個p</p>
<p>我也是個p</p>
<p>我不是個p也不行啊，有p包著呢</p>
</div>
</body>
</html>
如果這篇文章能幫到您，請您點(diǎn)點(diǎn)贊、點(diǎn)撥關(guān)注，感激不盡，如果您有前端方面的疑惑請?jiān)谠u論區(qū)留言。
