偽類用於定義元素的特殊狀態。 例如,它可用於:
後代選擇器匹配作為指定元素後代的所有元素。以下示例選擇元素內的所有元素:
選擇器:偽類
/*未訪問的鏈結
*/a:link
/*已瀏覽過的鏈結
*/a:visited
/*滑鼠懸停時候的鏈結
*/a:hover
/*選定的鏈結
*/a:active
注意:a:hover必須在css定義a:link之後和a:visited之後才能生效!a:active必須a:hover在css定義之後才能有效!偽類名稱不區分大小寫。
a.highlight:hover
:hover在元素上使用偽類的示例:
div:hover
將滑鼠懸停在元素上以顯示元素(如工具提示)
p div:hover p
:first-child偽類指定的元素是另乙個元素的第乙個子匹配。 在以下示例中,選擇器匹配任何元素的第乙個子元素元素:
p:first-child
匹配所有元素中的第乙個元素
p i:first-child
匹配所有第乙個子元素中的所有元素
p:first-child i
:lang偽類允許定義不同語言的特殊規則。在下面的示例中,:lang使用lang=「no」定義元素的引用:
q:lang(no)
選擇器例子
描述:active
a:active
選擇active啟用鏈結
:checked
input:checked
選擇每個選中的元素
:disabled
input:disabled
選擇每個禁用的元素
:empty
p:empty
選擇每個沒有子元素的元素
:enabled
input:enabled
選擇每個啟用的元素
:first-child
p:first-child
選擇作為其父級的第乙個子元素的每個元素
:first-of-type
p:first-of-type
選擇每個元素,它是其父元素的第乙個元素
:focus
input:focus
選擇具有焦點的元素
:hover
a:hover
選擇滑鼠懸停時的鏈結
:in-range
input:in-range
選擇具有指定範圍內的值的元素
:invalid
input:invalid
選擇具有無效值的所有元素
:lang(language)
p:lang(it)
選擇具有以「it」開頭的lang屬性值的每個元素
:last-child
p:last-child
選擇作為其父級的最後乙個子元素的每個元素
:last-of-type
p:last-of-type
選擇每個元素,它是其父元素的最後乙個元素
:link
a:link
選擇所有未訪問的鏈結
:not(selector)
:not(p)
選擇不是元素的每個元素
:nth-child(n)
p:nth-child(2)
選擇作為其父級的第二個子元素的每個元素
:nth-last-child(n)
p:nth-last-child(2)
選擇每個元素作為其父元素的第二個子元素,從最後乙個子元素開始計算
:nth-last-of-type(n)
p:nth-last-of-type(2)
選擇每個元素作為其父元素的第二個元素,從最後乙個子元素開始計算
:nth-of-type(n)
p:nth-of-type(2)
選擇每個元素,它是其父元素的第二個元素
:only-of-type
p:only-of-type
選擇每個元素,它是其父元素的唯一元素
:only-child
p:only-child
選擇每個元素,它是其父元素的唯一子元素
:optional
input:optional
選擇沒有「required」屬性的元素
:out-of-range
input:out-of-range
選擇元素,其值超出指定範圍
:read-only
input:read-only
選擇具有指定「readonly」屬性的元素
:read-write
input:read-write
選擇沒有「readonly」屬性的元素
:required
input:required
選擇指定了「required」屬性的元素
:root
root
選擇文件的根元素
:target
#news:target
選擇當前活動的#news元素(單擊包含該錨名稱的url)
:valid
input:valid
選擇具有有效值的所有元素
:visited
a:visited
選擇所有訪問過的鏈結
選擇器例子
描述::after
p::after
在每個元素後插入內容
::before
p::before
在每個元素之前插入內容
::first-letter
p::first-letter
選擇每個元素的第乙個字母
::first-line
p::first-line
選擇每個元素的第一行
::selection
p::selection
選擇使用者選擇的元素部分
CSS3 偽元素和偽類
css偽類和偽元素的區別,在css3中,實際上的偽元素應該只有 before和 after兩個了,這兩個元素是實際存在在dom中的,而類本身就是表示元素的狀態,所以偽類應該也是為了表示元素的狀態的。在css3中,可以直接用 還是 來區分偽類和為元素了。由於偽類主要是表示元素的狀態,那麼偽類的主要功能...
css3 偽元素和偽類
1,定義 w3c定義 偽元素偽類 都可以向某些選擇器設定特殊效果。css2中定義 css3中的定義 1 偽元素 在dom樹中建立了一些抽象元素 虛擬的容器 由兩個冒號 開頭 css2中並沒有區別 為了相容性一般還是寫乙個冒號 2 偽類 為了選擇器找到那些不存在於dom樹中的資訊 及 不能被常規css...
css3新增的偽類和偽元素
e target事件屬性可返回事件的目標節點 觸發該事件的節點 如生成事件的元素 文件或視窗 e disabled表示不可點選的表單控制項 e enabled表示可點選的表單控制項 e checked表示已選中的checkbox或radio e f 表示e元素毗鄰的f元素 e not s 表示e元素...