偽類和偽元素,review

2022-08-24 01:00:15 字數 1022 閱讀 5227

總是分不太清楚,然後容易忘記這個概念,專案中又遇到了,複習一遍

1.哪些常用的偽類?偽元素?

怎麼記:

除了4個偽元素,其他都是偽類

哪四個偽元素?:before :after :first-letter :first-line

偽類:first-child

:link

:visited

:hover

:active

等2.偽類和偽元素的區別

想想常用:before :after 用來幹嘛?

遇到的比較多的是在元素前後插入,或者清除浮動

h1:before

left

right

.clearfix:after

.clearfix

定義:

偽元素是創造文件樹之外的物件。例如文件不能提供訪問元素內容第一字或者第一行的機制。偽元素還提供一些在源文件中不存在的內容分配樣式,例如:before和:after能夠訪問產生的內容。

想想常用偽類用來幹嘛?

匹配元素

a:link  /* 未訪問的鏈結 */

a:visited /* 已訪問的鏈結 */

a:hover /* 滑鼠劃過鏈結 */

a:active /* 已選中的鏈結 */

選擇器匹配作為任何元素的第乙個子元素的 元素

p:first-child

定義

偽類其實就是基於普通dom元素而產生的不同狀態,他是dom元素的某一特徵。

3.總結

一句話總結不同之處就是,偽元素產生新物件,在dom樹中看不到,但是可以操作;偽類不產生新的物件,僅是dom中乙個元素的不同狀態;

css3中,為了區別和標準化,偽元素修改為以 :: 開頭,但因為歷史原因,瀏覽器對以:開頭的偽元素也繼續支援,但建議規範書寫為::開頭。

參考資料

文章1文章2

偽類和偽元素

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

偽類和偽元素

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

偽類和偽元素

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