偽元素和偽類

2021-10-25 07:39:14 字數 2117 閱讀 6819

引入偽類和偽元素是為了格式化文件樹以外的資訊。也就是說,偽類和偽元素是用來修飾不在文件樹中的部分,比如,一句話中的第乙個字母,或者是列表中的第乙個元素。

偽類和偽元素的根本區別在於:他們是否建立了新的元素。

偽類:用於向某些選擇器新增特殊的效果

偽元素:用於將特殊的效果新增到某些選擇器

偽元素不存在dom文件中,是虛擬的元素,是建立新元素。代表某個元素的子元素,這個子元素雖然在邏輯上存在,但卻並不實際存在於文件樹中。

偽元素css

用途e:first-letter/e::first-letter

css1/3

設定物件內第乙個字元的樣式

e:first-line/e::first-line

css1/3

設定物件內第一行的樣式

e:before/e::before

css2/3

設定物件前發生的內容,和content屬性一起使用

e:after/e::after

css2/3

設定物件後發生的內容,和content屬性一起使用

e::palceholder

css3

設定物件文字佔位符樣式

e::selection

css3

設定物件被選擇時的顏色

偽類存在dom文件中,邏輯上存在但在文件樹中卻無須標識的「幽靈」分類。

偽類css

用途e:link

css1

設定超連結a在未被訪問前的樣式

e:visited

css1

e:hover

css1/2

設定元素在其滑鼠懸停時的樣式

e:active

css1/2

設定元素被啟用時的樣式

e:focus

css1/2

設定元素獲得焦點時的樣式

e:lang(fr)

css2

匹配使用特殊語言的e元素

e:not(s)

css3

匹配不含有s選擇符的元素e

e:root

css3

匹配e元素在文件中的根元素

e:first-child

css2

匹配父元素的第乙個子元素e

e:last-child

css3

匹配父元素的最後乙個子元素e

e:only-child

css3

匹配父元素僅有的乙個元素e

e:nth-child(n)

css3

匹配父元素的第n個子元素e

e:first-of-type

css3

匹配同型別中的第乙個同級兄弟元素e

e:last-of-type

css3

匹配同型別中的最後乙個同級兄弟元素e

e:only-of-type

css3

匹配同型別中唯一的乙個同級兄弟元素e

e:nth-of-type(n)

css3

匹配同型別中的第n個同級兄弟元素e

e:only-last-of-type(n)

css3

匹配同型別中的倒數第n個同級兄弟元素e

e:empty

css3

匹配沒有任何子元素的元素e

e:checked

css3

匹配使用者介面上處於選中狀態的元素e(input的type為radio或checkbox)

e:enabled

css3

匹配使用者介面處於可用狀態的元素e

e:disabled

css3

匹配使用者介面處於禁用狀態的元素e

e:target

css3

匹配相關url指定的元素e

@page:first

css2

設定頁面容器第一頁使用的樣式。僅用於@page規則

@page:left

css2

設定頁面容器位於裝訂線左邊的所有頁面使用的樣式。僅用於@page規則

@page:right

css2

設定頁面容器位於裝訂線右邊的所有頁面使用的樣式。僅用於@page規則

偽類和偽元素

偽元素 first letter向文字的第乙個字母新增特殊樣式 first line 向文字的第一行新增樣式 before 在元素之前新增內容 after 在元素之後新增內容 偽類 link 未被訪問的鏈結 visited 已訪問的鏈結 hover當滑鼠懸停到元素上方時 active被啟用的元素 注...

偽類和偽元素

定義 偽類和偽元素就是為文件中不一定存在的結構指定樣式,或者為某些元素 甚至文件本身 的狀態所指示的幻象類指定樣式。css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。偽類的形式 選擇符 偽類 偽元素的形式 選擇符 偽元素 css3規範中要求使用雙冒號 表示偽元素,以此來區分偽元素和偽類。鏈結偽...

偽類和偽元素

1 偽類 用於向某些選擇器新增特殊的效果,當已用元素處於某種狀態時,為其新增對應的樣式 link未訪問的連線 visited已訪問的連線 hover滑鼠移動到容器,可用於頁面的任何元素 active被啟用時的狀態,不僅限於連線 focus獲得焦點時的狀態,不僅限於連線 target first ch...