CSS 偽類

CSS 偽類 (Pseudo-classes)

CSS 偽類是用來添加一些選擇器的特殊效果。

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

語法

偽類的語法：

CSS 類也可以使用偽類：

anchor 偽類

在支持 CSS 的瀏覽器中，鏈接的不同狀態(tài)都可以以不同的方式顯示

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

注意： 在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

注意：偽類的名稱不區(qū)分大小寫。

偽類和 CSS 類

偽類可以與 CSS 類配合使用：

如果在上面的例子的鏈接已被訪問，它會顯示為紅色。

CSS - :first - child 偽類

您可以使用 :first-child 偽類來選擇元素的第一個子元素

注意：在 IE8 的之前版本必須聲明 <!DOCTYPE> ，這樣 :first-child 才能生效。

匹配第一個 <p> 元素

在下面的例子中，選擇器匹配作為任何元素的第一個子元素的 <p> 元素：

匹配所有 <p> 元素中的第一個 <i> 元素

在下面的例子中，選擇相匹配的所有 <p> 元素的第一個 <i> 元素：

匹配所有作為第一個子元素的 <p> 元素中的所有 <i> 元素

在下面的例子中，選擇器匹配所有作為元素的第一個子元素的 <p> 元素中的所有 <i> 元素：

CSS - :lang 偽類

:lang 偽類使你有能力為不同的語言定義特殊的規(guī)則

注意：IE8 必須聲明 <!DOCTYPE> 才能支持; lang 偽類。

在下面的例子中，:lang 類為屬性值為 no 的 q 元素定義引號的類型：

更多實例

為超鏈接添加不同樣式
這個例子演示了如何為超鏈接添加其他樣式。

使用 :focus
這個例子演示了如何使用 :focus 偽類。

所有CSS偽類/元素

擴(kuò)展閱讀

CSS 拾遺系列：淺談CSS中的偽元素和偽類