這篇文章給大家?guī)?lái)css中偽類(lèi)選擇器的簡(jiǎn)要介紹。讓大家可以了解偽類(lèi)選擇器在css中的作用，css偽類(lèi)選擇器有哪些分類(lèi)等知識(shí)。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括撫州網(wǎng)站建設(shè)、撫州網(wǎng)站制作、撫州網(wǎng)頁(yè)制作以及撫州網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，撫州網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到撫州省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

一、偽類(lèi)選擇器介紹

偽類(lèi)選擇器（簡(jiǎn)稱：偽類(lèi)）通過(guò)冒號(hào)來(lái)定義，它定義了元素的狀態(tài)，如點(diǎn)擊按下，點(diǎn)擊完成等，通過(guò)偽類(lèi)可以為元素的狀態(tài)修改樣式。

偽類(lèi)的功能和一般的DOM中的元素樣式相似，但和一般的DOM中的元素樣式不一樣，它并不改變?nèi)魏蜠OM內(nèi)容。只是插入了一些修飾類(lèi)的元素，這些元素對(duì)于用戶來(lái)說(shuō)是可見(jiàn)的，但是對(duì)于DOM來(lái)說(shuō)不可見(jiàn)。偽類(lèi)的效果可以通過(guò)添加一個(gè)實(shí)際的類(lèi)來(lái)達(dá)到。

二、偽類(lèi)選擇器的分類(lèi)

偽類(lèi)選擇器主要可以分為：動(dòng)態(tài)偽類(lèi)選擇器、UI元素狀態(tài)偽類(lèi)選擇器、結(jié)構(gòu)偽類(lèi)選擇器、否定偽類(lèi)選擇器。

下面詳細(xì)介紹這些分類(lèi)的選擇器語(yǔ)法：

1.動(dòng)態(tài)偽類(lèi)選擇器語(yǔ)法

• E:link（鏈接偽類(lèi)選擇器）：選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問(wèn)過(guò)。常用于鏈接描點(diǎn)上

• E:visited（鏈接偽類(lèi)選擇器 ）：選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問(wèn)過(guò)。常用于鏈接描點(diǎn)上

• E:active（用戶行為選擇器）：選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點(diǎn)和按鈕上

• E:hover （用戶行為選擇器）： 選擇匹配的E元素，且用戶鼠標(biāo)停留在元素E上。IE6及以下瀏覽器僅支持a:hover

• E:focus （用戶行為選擇器）： 選擇匹配的E元素，而且匹配元素獲取焦點(diǎn)

動(dòng)態(tài)偽類(lèi)選擇器可以用于超鏈接 a標(biāo)簽的應(yīng)用中：

a標(biāo)簽有4種偽類(lèi)（即對(duì)應(yīng)四種狀態(tài)）,如下：

• :link “鏈接”：超鏈接點(diǎn)擊之前

• :visited “訪問(wèn)過(guò)的”：鏈接被訪問(wèn)過(guò)之后

• :hover “懸?！保菏髽?biāo)放到標(biāo)簽上的時(shí)候

• :active “激活”： 鼠標(biāo)點(diǎn)擊標(biāo)簽，但是不松手時(shí)。

代碼示例：

/*讓超鏈接點(diǎn)擊之前是紅色*/
a:link {color: red;}

/*讓超鏈接點(diǎn)擊之后是橙色*/
a:visited {color: orange;}

/*鼠標(biāo)懸停，放到標(biāo)簽上的時(shí)候是綠色*/
a:hover {color: green;}

/*鼠標(biāo)點(diǎn)擊鏈接，但是不松手的時(shí)候*/
a:active {color: black;}

a標(biāo)簽的這四種偽類(lèi)選擇器存在著一定的順序，各個(gè)樣式之間的順序很有講究，一旦出現(xiàn)排列錯(cuò)誤就很有可能形成覆蓋，導(dǎo)致其中某個(gè)樣式無(wú)法顯示。那么a標(biāo)簽的這四種偽類(lèi)選擇器需要怎樣排序才可以使用？

在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的，a:active 必須被置于 a:hover 之后，才是有效的。

所以，a標(biāo)簽的這四種偽類(lèi)選擇器的順序?yàn)椋篴:link ，a:visited，a:hover ，a:active

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

• E:checked（選中狀態(tài)偽類(lèi)選擇器）：匹配選中的復(fù)選按鈕或者單選按鈕表單元素

• E:enabled（啟用狀態(tài)偽類(lèi)選擇器 ）：匹配所有啟用的表單元素

• E:disabled（不可用狀態(tài)偽類(lèi)選擇器）：匹配所有禁用的表單元素

UI元素狀態(tài)偽類(lèi)選擇器主要是針對(duì)于HTML中的Form元素進(jìn)行操作，最常見(jiàn)的比如我們"type="text"有enable和disabled兩種狀態(tài)，前者為可寫(xiě)狀態(tài)后者為不可狀態(tài)；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態(tài)。來(lái)看兩個(gè)實(shí)例，比如說(shuō)你想將"disabled"的文本框與別的文本框區(qū)別出來(lái)，你就可以這樣應(yīng)用：

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

注意：IE6-8不支持":checked",":enabled",":disabled"這三種選擇器。

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

• E:fisrt-child ：作為父元素的第一個(gè)子元素的元素E。與E:nth-child(1)等同

• E:last-child ：作為父元素的最后一個(gè)子元素的元素E。與E:nth-last-child(1)等同

• E:root：選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html，此時(shí)該選擇器與html類(lèi)型選擇器匹配的內(nèi)容相同

• E F:nth-child(n)：選擇父元素E的第n個(gè)子元素F。其中n可以是整數(shù)（1，2，3）、關(guān)鍵字（even，odd）、可以是公式（2n+1）,而且n值起始值為1，而不是0.

• E F:nth-last-child(n)：選擇父元素E的倒數(shù)第n個(gè)子元素F。此選擇器與E:nth-child(n)選擇器計(jì)算順序剛好相反，但使用方法都是一樣的，其中：nth-last-child(1)始終匹配最后一個(gè)元素，與last-child等同

• E:nth-of-type(n) ：選擇父元素內(nèi)具有指定類(lèi)型的第n個(gè)E元素

• E:nth-last-of-type(n)：選擇父元素內(nèi)具有指定類(lèi)型的倒數(shù)第n個(gè)E元素

• E:first-of-type：選擇父元素內(nèi)具有指定類(lèi)型的第一個(gè)E元素，與E:nth-of-type(1)等同

• E:last-of-tye ：選擇父元素內(nèi)具有指定類(lèi)型的最后一個(gè)E元素，與E:nth-last-of-type(1)等同

• E:only-child ：選擇父元素只包含一個(gè)子元素，且該子元素匹配E元素

• E:only-of-type：選擇父元素只包含一個(gè)同類(lèi)型子元素，且該子元素匹配E元素

• E:empty： 選擇沒(méi)有子元素的元素，而且該元素也不包含任何文本節(jié)點(diǎn)

結(jié)構(gòu)偽類(lèi)選擇器，可以根據(jù)元素在文檔中所處的位置，來(lái)動(dòng)態(tài)選擇元素，從而減少HTML文檔對(duì)ID或類(lèi)的依賴，有助于保持代碼干凈整潔。

結(jié)構(gòu)偽類(lèi)選擇器很容易遭到誤解，需要特別強(qiáng)調(diào)。如：

p:first-child;

它表示的是：選擇父元素下的第一個(gè)子元素 p，而不是選擇 p 元素的第一個(gè)子元素。

注意：

結(jié)構(gòu)偽類(lèi)選擇器中，子元素的序號(hào)是從 1 開(kāi)始的，也就是說(shuō)，第一個(gè)子元素的序號(hào)是 1，而不是 0。換句話說(shuō)，當(dāng)參數(shù) n 的計(jì)算結(jié)果為 0 時(shí)，將不選擇任何元素。

4.否定偽類(lèi)選擇器

E:not(F)：匹配所有除元素F外的E元素

例：對(duì)form中所有input加邊框，但又不想submit也起變化，就可以這樣寫(xiě)：

input:not([type="submit"]) {border: 1px solid red;}

上述就是css中偽類(lèi)選擇器的介紹內(nèi)容，詳細(xì)使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)過(guò)才能領(lǐng)會(huì)。如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！