css3僞類和僞元素你都懂了嗎

什麼是僞類？

僞類用於定義元素的特殊狀態。 例如，它可用於：

• 當用戶將鼠標懸停在元素上時爲其設置樣式
• 訪問和未訪問的連接不一樣樣式
• 在得到焦點時設置元素的樣式

僞類的語法

後代選擇器匹配做爲指定元素後代的全部元素。如下示例選擇<div>元素內的全部<p>元素：

選擇器:僞類 {     屬性:值;   }

連接能夠以不一樣方式顯示：

/* 未訪問的連接 */ 
a:link {   color: red; } 
/* 已瀏覽過的連接 */ 
a:visited {   color: green; } 
/* 鼠標懸停時候的連接 */ 
a:hover {   color: hotpink; } 
/* 選定的連接 */ 
a:active {   color: blue; }

注意：a:hover必須在CSS定義a:link以後和a:visited以後才能生效！a:active必須 a:hover在CSS定義以後纔能有效！僞類名稱不區分大小寫。

僞類和CSS類

僞類能夠與CSS類結合使用：當您將鼠標懸停在示例中的連接上時，它將更改顏色：

a.highlight:hover {   color: #ff0000; }

將鼠標懸停在<div>上

:hover在<div>元素上使用僞類的示例：

div:hover {   background-color: blue; }

簡單的工具提示懸停

將鼠標懸停在<div>元素上以顯示<p>元素（如工具提示）

p {   
display: none; 
background-color: yellow;  
padding: 20px; 
} 
div:hover p { 
display: block;
}

:first-child僞類

:first-child僞類指定的元素是另外一個元素的第一個子匹配。 在如下示例中，選擇器匹配任何元素的第一個子元素<p>元素：

p:first-child {   color: blue; }

匹配全部<p>元素中的第一個<i>元素

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

匹配全部第一個子<p>元素中的全部<i>元素

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

:lang僞類

:lang僞類容許定義不一樣語言的特殊規則。在下面的示例中，:lang使用lang=「no」定義<q>元素的引用：

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

全部CSS僞類

選擇器	例子	描述
:active	a:active	選擇active激活連接
:checked	input:checked	選擇每一個選中的<input>元素
:disabled	input:disabled	選擇每一個禁用的<input>元素
:empty	p:empty	選擇每一個沒有子元素的<p>元素
:enabled	input:enabled	選擇每一個啓用的<input>元素
:first-child	p:first-child	選擇做爲其父級的第一個子元素的每一個<p>元素
:first-of-type	p:first-of-type	選擇每一個<p>元素，它是其父元素的第一個<p>元素
:focus	input:focus	選擇具備焦點的<input>元素
:hover	a:hover	選擇鼠標懸停時的連接
:in-range	input:in-range	選擇具備指定範圍內的值的<input>元素
:invalid	input:invalid	選擇具備無效值的全部<input>元素
:lang(language)	p:lang(it)	選擇具備以「it」開頭的lang屬性值的每一個<p>元素
:last-child	p:last-child	選擇做爲其父級的最後一個子元素的每一個<p>元素
:last-of-type	p:last-of-type	選擇每一個<p>元素，它是其父元素的最後一個<p>元素
:link	a:link	選擇全部未訪問的連接
: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>元素，它是其父元素的惟一<p>元素
:only-child	p:only-child	選擇每一個<p>元素，它是其父元素的惟一子元素
:optional	input:optional	選擇沒有「required」屬性的<input>元素
:out-of-range	input:out-of-range	選擇<input>元素，其值超出指定範圍
:read-only	input:read-only	選擇具備指定「readonly」屬性的<input>元素
:read-write	input:read-write	選擇沒有「readonly」屬性的<input>元素
:required	input:required	選擇指定了「required」屬性的<input>元素
:root	root	選擇文檔的根元素
:target	#news:target	選擇當前活動的#news元素（單擊包含該錨名稱的URL）
:valid	input:valid	選擇具備有效值的全部<input>元素
:visited	a:visited	選擇全部訪問過的連接

全部CSS僞元素

選擇器	例子	描述
::after	p::after	在每一個<p>元素後插入內容
::before	p::before	在每一個<p>元素以前插入內容
::first-letter	p::first-letter	選擇每一個<p>元素的第一個字母
::first-line	p::first-line	選擇每一個<p>元素的第一行
::selection	p::selection	選擇用戶選擇的元素部分