趣解 偽類和偽元素

2021-08-16 17:21:09 字數 1295 閱讀 1591

出來混,是要還的。之前跳過的知識點,以後的某一天都需要你加倍奉還。

最近寫偽類和偽元素的時候,老是搞混淆。也許是之前沒有記牢固吧,決定今天自己再理一遍。

偽元素就相當於他的書包,書包不屬於個體的一部分,是額外新增的。書包可以放在小孩的胸前,也可以放在小孩的背後;分別對應 ::before 和 ::after。書包中的書,對應偽元素的content 屬性。

偽類分為:結構性偽類和狀態偽類。

p 代表小孩

- p:first-child 選擇 p 元素的第乙個子元素;// 小孩子的手

- p:last-child 選擇 p 元素的最後乙個子元素; // 小孩子的腳

- p:nth-child(3n) 選擇 p 元素的乙個或多個特定的子元素;// 小孩子手的第3、6、9根這三個手指

- p:nth-last-child(2) 選擇 p 元素的乙個或多個特定的子元素;// 小孩子腳的第二根手指

———— 其他的結構性偽類

:nth-of-type() 選擇指定的元素;

:nth-last-of-type() 選擇指定的元素,從元素的最後乙個開始計算;

:first-of-type 選擇乙個上級元素下的第乙個同類子元素;

:last-of-type 選擇乙個上級元素的最後乙個同類子元素;

:only-child 選擇的元素是它的父元素的唯一乙個子元素;

:only-of-type 選擇乙個元素是它的上級元素的唯一乙個相同型別的子元素;

:empty 選擇的元素裡面沒有任何內容。

狀態偽類是基於元素當前狀態進行選擇的。在與使用者的互動過程中元素的狀態是動態變化的,因此該元素會根據其狀態呈現不同的樣式。當元素處於某狀態時會呈現該樣式,而進入另一狀態後,該樣式也會失去。常見的狀態偽類主要包括:

偽類就模擬小孩子的手、腳;這些本來就是小孩身體結構的一部分。而偽元素,就模擬於書包,是額外新增的,不屬於小孩子身體結構的一部分。

總結:偽類操作的是文件樹本身的元素,而偽元素操作的是文件樹之外(額外新增,並不存在於文件結構中)的元素。

有時你會發現偽元素使用了兩個冒號 (::) 而不是乙個冒號 (:),這是 css3 規範中的一部分要求,目的是為了區分偽類和偽元素,大多數瀏覽器都支援這兩種表示方式。單冒號(:)用於 css3 偽類,雙冒號(::)用於 css3 偽元素。對於 css2 中已經有的偽元素,例如 :before,單冒號和雙冒號的寫法 ::before 作用是一樣的。

偽類和偽元素

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

偽類和偽元素

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

偽類和偽元素

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