一、偽類選擇器介紹

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

偽類的功能和一般的DOM中的元素樣式相似，但和一般的DOM中的元素樣式不一樣，它并不改變任何DOM內容。只是插入了一些修飾類的元素，這些元素對于用戶來說是可見的，但是對于DOM來說不可見。偽類的效果可以通過添加一個實際的類來達到。

二、偽類選擇器的分類

偽類選擇器主要可以分為：動態偽類選擇器、UI元素狀態偽類選擇器、結構偽類選擇器、否定偽類選擇器。

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

1.動態偽類選擇器語法

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

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

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

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

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

動態偽類選擇器可以用于超鏈接 a標簽的應用中：

a標簽有4種偽類（即對應四種狀態）,如下：

• :link “鏈接”：超鏈接點擊之前

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

• :hover “懸停”：鼠標放到標簽上的時候

• :active “激活”： 鼠標點擊標簽，但是不松手時。

代碼示例：

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

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

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

/*鼠標點擊鏈接，但是不松手的時候*/
a:active {color: black;}

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

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

所以，a標簽的這四種偽類選擇器的順序為：a:link ，a:visited，a:hover ，a:active

2.UI元素狀態偽類選擇器

• E:checked（選中狀態偽類選擇器）：匹配選中的復選按鈕或者單選按鈕表單元素

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

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

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

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

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

3.結構偽類選擇器

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

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

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

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

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

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

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

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

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

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

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

• E:empty： 選擇沒有子元素的元素，而且該元素也不包含任何文本節點

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

結構偽類選擇器很容易遭到誤解，需要特別強調。如：

p:first-child;

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

注意：

結構偽類選擇器中，子元素的序號是從 1 開始的，也就是說，第一個子元素的序號是 1，而不是 0。換句話說，當參數 n 的計算結果為 0 時，將不選擇任何元素。

4.否定偽類選擇器

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

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

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

以上就是css中什么是偽類選擇器？偽類選擇器的簡要介紹的詳細內容，更多請關注php中文網其它相關文章！