偽類和偽元素

2021-08-21 10:55:15 字數 1080 閱讀 9011

定義:

偽類和偽元素就是為文件中不一定存在的結構指定樣式,或者為某些元素(甚至文件本身)的狀態所指示的幻象類指定樣式。css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。

偽類的形式:選擇符: 偽類

偽元素的形式:選擇符:: 偽元素

css3規範中要求使用雙冒號(::)表示偽元素,以此來區分偽元素和偽類。

鏈結偽類

a:link  //指向未訪問的鏈結

a:visited //指向已訪問的鏈結

動態偽類

e:hover  //元素上有滑鼠指標停留

e:active //元素被使用者輸入啟用

e:focus  //元素擁有輸入焦點

偽類的順序很重要,一般為link-visited-focus-hover-active。動態偽類可以應用到任何元素,可以為使用者提供一種「強調」的作用。

e:first-child

為父元素(可以body,div,ul,ol等)中的第乙個子元素e元素設定樣式,注意,e必須是父元素中的第乙個子元素。

e:lang(value)

為e元素中lang屬性為value的元素設定屬性。相當於e[lang |= 「value」]。

結合偽類

a:link:hover//滑鼠停留在未訪問的鏈結上

a:visited:hover//滑鼠停留在已訪問的鏈結上

偽元素選擇器

在文件中插入假想元素,導致使用者**對乙個假想元素做出響應。

p:first-letter  //設定首字母樣式,為p塊級元素第乙個元素設定樣式

p:first-line   //設定第一行的樣式,為p塊級元素第乙個元素設定樣式

所有偽元素都必須放在出現該偽元素的選擇器的最後面。

設定之前和之後元素的樣式

e:before

e:after

偽類與偽元素的具體用法

偽類和偽元素

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

偽類和偽元素

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

偽元素和偽類

引入偽類和偽元素是為了格式化文件樹以外的資訊。也就是說,偽類和偽元素是用來修飾不在文件樹中的部分,比如,一句話中的第乙個字母,或者是列表中的第乙個元素。偽類和偽元素的根本區別在於 他們是否建立了新的元素。偽類 用於向某些選擇器新增特殊的效果 偽元素 用於將特殊的效果新增到某些選擇器 偽元素不存在do...