CSS 偽類 (Pseudo-classes)（二十）

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

CSS 偽類用於向某些選取器添加特殊的效果。

CSS 偽類 (Pseudo-classes)執行個體：

超連結: 本例示範如何向文檔中的超連結添加不同的顏色。
超連結 2: 本例示範如何向超連結添加其他樣式。
:first-child（首個子物件）: 本例示範 :first-child 偽類的用法。
:lang（語言）: 本例示範 :lang 偽類的用法。

CSS 定位屬性 (Positioning)

偽類的文法：

selector:pseudo-class {property: value}

CSS 類也可與偽類搭配使用。

selector.class:pseudo-class {property: value}

錨偽類

在支援 CSS 的瀏覽器中，連結的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和滑鼠移至上方狀態。

a:link {color: #FF0000}     /* unvisited link */a:visited {color: #00FF00}  /* visited link */a:hover {color: #FF00FF}   /* mouse over link */a:active {color: #0000FF}   /* selected link */

提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效。

提示：在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效。

提示：偽類名稱對大小寫不敏感。

偽類和 CSS 類

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

a.red:visited {color: #FF0000}<a class="red" href="css_syntax.asp">CSS Syntax</a>

假如上面的例子中的連結被訪問過，那麼它將顯示為紅色。

CSS2 - :first-child 偽類

:first-child 偽類對另一個元素的第一個子項目進行匹配。

例子 1：

在這個例子中，選取器對 div 元素中的第一個子項目為 p 的元素進行匹配 - 對 div 元素內的第一個段落進行縮排：

div > p:first-child   {   text-indent:25px   }

<div><p>div中的第一段。這個段落將被縮排。</p><p>div中的第二段。這個段落不會被縮排。</p></div>

下面的 HTML 中的段落將不會被匹配：

<div><h1>Header</h1><p>div中的第一段，但不是div中的第一個子項目。這個段落不會被縮排。</p></div>

例子 2：

在這個例子中，選取器將對 p 元素中的第一個子項目為 em 的元素進行匹配 - 並且將 p 元素中的第一個 em 元素設定為粗體：

p:first-child em   {   font-weight:bold   }

例如，下面的 HTML 中的 em 是段落的第一個子項目：

<p>I am a <em>strong</em> man.</p>

例子 3：

在這個例子中，選取器將對任何元素的第一個子項目為 a 的元素進行匹配 - 將 text-decoration 屬性設定為 none：

a:first-child   {   text-decoration:none   }

例如，下面的 HTML 中的第一個 a 元素是段落中的第一個子項目，所以沒有底線。

但是第二個 a 不是段落的第一個子項目，所以有底線。

<p>訪問<a href="http://www.w3school.com.cn">W3School</a>學習CSS！訪問<a href="http://www.w3school.com.cn">W3School</a>學習HTML！</p>

CSS2 - :lang 偽類

:lang 偽類使你有能力為不同的語言定義特殊的規則。在下面的例子中，:lang 類為屬性值為 no 的 q 元素定義引號的類型：

<html><head><style type="text/css">q:lang(no)   {   quotes: "~" "~"   }</style></head><body><p>文字<q lang="no">段落中的引用的文字</q>文字</p></body></html>

偽類

瀏覽器支援：IE Internet Explorer, F: Firefox, N: Netscape。

W3C：“W3C” 列的數字顯示出偽類屬性由哪個 CSS 標準定義（CSS1 還是 CSS2）。

偽類	作用	IE	F	N	W3C
:active	將樣式添加到被啟用的元素	4	1	8	1
:focus	將樣式添加到被選中的元素	-	-	-	2
:hover	當滑鼠懸浮在元素上方時，向元素添加樣式	4	1	7	1
:link	將特殊的樣式添加到未被訪問過的連結	3	1	4	1
:visited	將特殊的樣式添加到被訪問過的連結	3	1	4	1
:first-child	將特殊的樣式添加到元素的第一個子項目		1	7	2
:lang	允許創作者來定義指定的元素中使用的語言		1	8	2

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More