什么是偽類選擇器？css中偽類選擇器的簡要介紹

這篇文章給大家?guī)韈ss中偽類選擇器的簡要介紹。讓大家可以了解偽類選擇器在css中的作用，css偽類選擇器有哪些分類等知識。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一、偽類選擇器介紹

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

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

二、偽類選擇器的分類

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

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

1.動態(tài)偽類選擇器語法

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

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

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

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

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

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

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

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

• :visited “訪問過的”：鏈接被訪問過之后

• :hover “懸停”：鼠標(biāo)放到標(biāo)簽上的時候

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

代碼示例：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

p:first-child;

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

注意：

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

4.否定偽類選擇器

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

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

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

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