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

2022-08-18 00:36:13 字數 3203 閱讀 6128

偽類用於定義元素的特殊狀態。 例如,它可用於:

後代選擇器匹配作為指定元素後代的所有元素。以下示例選擇元素內的所有元素:

選擇器:偽類
/*

未訪問的鏈結

*/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元素...