CSS 偽類

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


語法

偽類的語法:

selector:pseudo-class {property:value;}

CSS類也可以使用偽類:

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


anchor偽類

在支援 CSS 的瀏覽器中,連結的不同狀態都可以以不同的方式顯示

例項

a:link {color:#FF0000;} /* 未訪問的連結 */ a:visited {color:#00FF00;} /* 已訪問的連結 */ a:hover {color:#FF00FF;} /* 滑鼠劃過連結 */ a:active {color:#0000FF;} /* 已選中的連結 */


注意: 在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.html">CSS 語法</a>

如果在上面的例子的連結已被訪問,它會顯示為紅色。


CSS :first-child 偽類

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

注意:在IE8的之前版本必須宣告<!DOCTYPE> ,這樣 :first-child 才能生效。

匹配第一個 <p> 元素

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

例項

p:first-child { color:blue; }


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

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

例項

p > i:first-child { color:blue; }


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

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

例項

p:first-child i { color:blue; }


CSS - :lang 偽類

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

注意:IE8必須宣告<!DOCTYPE>才能支援;lang偽類。

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

例項

q:lang(no) {quotes: "~" "~";}



Examples

更多例項

為超連結新增不同樣式
這個例子演示瞭如何為超連結新增其他樣式。

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


所有CSS偽類/元素

選擇器 示例 示例說明
:checked input:checked 選擇所有選中的表單元素
:disabled input:disabled 選擇所有禁用的表單元素
:empty p:empty 選擇所有沒有子元素的p元素
:enabled input:enabled 選擇所有啟用的表單元素
:first-of-type p:first-of-type 選擇的每個 p 元素是其父元素的第一個 p 元素
:in-range input:in-range 選擇元素指定範圍內的值
:invalid input:invalid 選擇所有無效的元素
:last-child p:last-child 選擇所有p元素的最後一個子元素
:last-of-type p:last-of-type 選擇每個p元素是其母元素的最後一個p元素
:not(selector) :not(p) 選擇所有p以外的元素
:nth-child(n) p:nth-child(2) 選擇所有 p 元素的父元素的第二個子元素
:nth-last-child(n) p:nth-last-child(2) 選擇所有p元素倒數的第二個子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 選擇所有p元素倒數的第二個為p的子元素
:nth-of-type(n) p:nth-of-type(2) 選擇所有p元素第二個為p的子元素
:only-of-type p:only-of-type 選擇所有僅有一個子元素為p的元素
:only-child p:only-child 選擇所有僅有一個子元素的p元素
:optional input:optional 選擇沒有"required"的元素屬性
:out-of-range input:out-of-range 選擇指定範圍以外的值的元素屬性
:read-only input:read-only 選擇只讀屬性的元素屬性
:read-write input:read-write 選擇沒有隻讀屬性的元素屬性
:required input:required 選擇有"required"屬性指定的元素屬性
:root root 選擇文件的根元素
:target #news:target 選擇當前活動#news元素(點選URL包含錨的名字)
:valid input:valid 選擇所有有效值的屬性
:link a:link 選擇所有未訪問連結
:visited a:visited 選擇所有訪問過的連結
:active a:active 選擇正在活動連結
:hover a:hover 把滑鼠放在連結上的狀態
:focus input:focus 選擇元素輸入後具有焦點
:first-letter p:first-letter 選擇每個<p> 元素的第一個字母
:first-line p:first-line 選擇每個<p> 元素的第一行
:first-child p:first-child 選擇器匹配屬於任意元素的第一個子元素的 <p> 元素
:before p:before 在每個<p>元素之前插入內容
:after p:after 在每個<p>元素之後插入內容
:lang(language) p:lang(it) 為<p>元素的lang屬性選擇一個開始值