偽類(lèi)是什么？常用的偽類(lèi)選擇器有哪些？

猿友 2021-05-27 12:08:34 瀏覽數(shù) (8153)

反饋

偽類(lèi)選擇器是 CSS 樣式表中重要的內(nèi)容之一。那么這篇文章中 w3cschool 小編來(lái)為大家介紹下偽類(lèi)是什么，常用的偽類(lèi)選擇器有哪些。

偽類(lèi)是什么？

CSS 偽類(lèi)是用來(lái)添加一些選擇器的特殊效果。

由于狀態(tài)的變化是非靜態(tài)的，所以元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)偽類(lèi)的樣式；當(dāng)狀態(tài)改變時(shí)，它又會(huì)失去這個(gè)樣式。由此可以看出，它的功能和 class 有些類(lèi)似，但它是基于文檔之外的抽象，所以叫偽類(lèi)。

常用的偽類(lèi)選擇器有哪些？

動(dòng)態(tài)偽類(lèi)選擇器

:link。元素被定義了超鏈接但并未被訪(fǎng)問(wèn)過(guò)
:visited。元素被定義了超鏈接并已被訪(fǎng)問(wèn)過(guò)
:active。元素被激活
:hover。鼠標(biāo)懸停
:focus。元素獲取焦點(diǎn)

在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后；a:active 必須被置于 a:hover 之后。所以，a 標(biāo)簽的這四種偽類(lèi)選擇器的順序?yàn)椋?a:link ，a:visited，a:hover ，a:active?。必須嚴(yán)格按照此規(guī)則來(lái)設(shè)置屬性，否則無(wú)效。

UI 元素狀態(tài)偽類(lèi)選擇器

:checked。選中的復(fù)選按鈕或者單選按鈕表單元素
:enabled。所有啟用的表單元素
:disabled。所有禁用的表單元素

UI 元素狀態(tài)偽類(lèi)選擇器主要是針對(duì) Form 表單元素進(jìn)行操作，最常見(jiàn)的使用方式如設(shè)置 "type="text" 有 enable 和 disabled 兩種狀態(tài)，enable 為可寫(xiě)狀態(tài)，disabled 為不可狀態(tài)。

結(jié)構(gòu)偽類(lèi)選擇器

:fisrt-child。父元素的第一個(gè)子元素
:last-child。父元素的最后一個(gè)子元素的元素
:root。元素所在文檔的根元素。在 HTML 文檔中，根元素始終是 html，此時(shí)該選擇器與 html 類(lèi)型選擇器匹配的內(nèi)容相同
:nth-child(n)。父元素的第 n 個(gè)子元素。其中 n 可以是整數(shù)（1，2，3）、關(guān)鍵字（even，odd）、也可以是公式（2n+1）,而且 n 值起始值為 1，而不是 0。
:nth-last-child(n)：父元素的倒數(shù)第 n 個(gè)子元素。此選擇器與 :nth-child(n) 選擇器計(jì)算順序剛好相反，但使用方法都是一樣的，其中 :nth-last-child(1) 始終匹配最后一個(gè)元素，與 last-child 等同。
:nth-of-type(n) 。父元素內(nèi)具有指定類(lèi)型的第 n 個(gè)元素
:nth-last-of-type(n)。父元素內(nèi)具有指定類(lèi)型的倒數(shù)第 n 個(gè)元素
:first-of-type。父元素內(nèi)具有指定類(lèi)型的第一個(gè)元素，與 nth-of-type(1) 等同
:last-of-tye 。父元素內(nèi)具有指定類(lèi)型的最后一個(gè)元素，與 :nth-last-of-type(1) 等同
:only-child 。父元素只包含一個(gè)子元素，且該子元素匹配元素
:only-of-type。選擇父元素只包含一個(gè)同類(lèi)型子元素，且該子元素匹配選擇元素
:empty。選擇沒(méi)有子元素的元素，而且該元素也不包含任何文本節(jié)點(diǎn)

使用結(jié)構(gòu)偽類(lèi)選擇器的好處是可以根據(jù)元素在文檔中所處的位置，來(lái)動(dòng)態(tài)地選擇元素，從而減少 HTML 文檔對(duì) id 或類(lèi)的依賴(lài)，有助于保持代碼干凈整潔。
另外需要注意的是，在結(jié)構(gòu)偽類(lèi)選擇器中，子元素的序號(hào)是從 1 開(kāi)始的。