CSS 偽類

CSS 偽類選擇器基於附加條件匹配元素，並且不一定由文件樹定義。

什麼是偽類

CSS 偽類允許你設定元素的動態狀態，例如懸停，活動和焦點狀態，以及文件樹中存在的元素，但不能通過使用其他選擇器來定位而不新增任何元素它們的 ID 或類，例如，定位第一個或最後一個子元素。

偽類以冒號（:） 開頭。其語法如下：

selector:pseudo-class { property : value ; } 

以下部分描述了最常用的偽類。

錨偽類

使用 anchor 偽類連結可以以不同的方式顯示：

這些偽類使你可以將未訪問的連結設定為與訪問過的連結不同。最常見的樣式技術是從訪問過的連結中刪除下劃線。

a:link {
    color: blue;
}
a:visited {
    text-decoration: none;
}

一些錨偽類是動態的 - 它們是作為使用者與文件互動的結果而應用的，例如懸停或焦點等。

a:hover {
    color: red;
}
a:active {
    color: gray;
}
a:focus {
    color: yellow;
}

這些偽類更改連結的呈現方式以響應使用者操作。

• :hover 適用於當使用者將游標放在元素上但不選擇它時。
• :active 適用於啟用或單擊元素時。
• :focus 適用於當元素具有鍵盤焦點時。

注： 為了使這些偽類很好地工作，你必須在正確的順序將它們定義- ， :link ， :visited ， :hover :active ，:focus。

：:first-child 偽類

:first-child 偽類匹配的是一些其他元素的第一個子元素的元素。下面示例中的 ol li:first-child 選擇器選擇有序列表的第一個列表項，並從中刪除頂部邊框。

ol li:first-child {
    border-top: none;
}

注意： 要 :first-child 在 Internet Explorer 8 及更早版本中工作，必須在文件頂部宣告。 <!DOCTYPE>

：:last-child 偽類

:last-child 偽類匹配的是一些其他元素的最後一個子元素的元素。下例中的 ul li:last-child 選擇器從無序列表中選擇最後一個列表項，並從中刪除右邊框。

ul li:last-child {
    border-right: none;
}

注意： CSS :last-child 選擇器在 Internet Explorer 8 和早期版本中不起作用。Internet Explorer 9 及更高版本支援。

：:nth-child 偽類

CSS3 引入了一個新的 :nth-child 偽類，允許你定位給定父元素的一個或多個特定子元素。此選擇的基本語法為 :nth-child(N) ，其中 N 是一個引數，其可以是一個數字，一個關鍵字（even 或 odd），或表示式 xn+y ，其中 x 和 y 是整數（例如 1n ， 2n ， 2n+1 ，…）。

table tr:nth-child(2n) td {
    background: #eee;
}

上例中的樣式規則只是突出顯示備用錶行，而不向 <table> 元素新增任何 ID 或類。

**提示：**在必須選擇在特定間隔或模式中出現在文件樹內部的元素（如偶數或奇數位置等）的情況下，CSS :nth-child(N) 選擇器非常有用。

:lang 偽類

語言偽類 :lang 允許基於特定標籤的語言設定構建選擇器。

q:lang(no) {
    quotes: "~" "~";
}
/* HTML code snippet */
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

注意： 版本 7 以下的 Internet Explorer 不支援 :lang 偽類。僅當指定了 <!DOCTYPE> 時，IE8 才支援。

偽類和 CSS 類

偽類可以與 CSS 類結合使用。

以下示例中的 class="red" 連結將以紅色顯示。

a.red:link {    /* style rule */
    color: #ff0000;
}
<a class="red" href="#">Click me</a>    /* HTML code snippet */
PREVIOUS PAGE