偽類和偽元素

2022-07-06 19:45:11 字數 1628 閱讀 5628

1. 在css2中,偽類和偽元素都用乙個冒號來表示: ,而在css3中,偽類是乙個冒號: ,偽元素是兩個冒號::

如:偽類 → :active ;偽元素 → ::before

為了一些相容性問題,有的時候會都使用乙個: 表示。

2. 乙個css選擇符可以有很多偽類,但只能有乙個偽元素

3. 偽類可以相互拼接,而偽元素不能拼接(只允許存在乙個),偽類可以和偽元素拼接,但偽元素必須處於最後一位

4. 偽類基於dom,產生不同的狀態,不產生新物件,用於修飾;偽元素創造乙個不存在於dom裡的新物件(可理解為新標籤),並對其操作。

1. 當使用偽類時,如以下**,首先會定位到第三個,再檢測是否為p標籤,而不是選擇第三個p標籤,所以在示例二中不顯示紅字。

<

body

>

<

p>這是

p>

<

p>乙個

p>

<

p>關於

p>

<

p>偽類和偽元素的

p>

<

p>事例

p>這是

p>

<

p>乙個

p>

<

a>我是a標籤

a>

<

p>關於

p>

<

p>偽類和偽元素的

p>

<

p>事例

2. 在a標籤使用偽類時,注意四個狀態順序不能調換:link(未點選)、visited(已點選)、hover(滑鼠移動懸空)、active(滑鼠移動點選不松)。

3.在使用偽元素:before和:after的時候切記一定要有content屬性,content用來定義插入的內容,content必須有值,至少是空。

預設情況下,偽元素的display是預設值inline,可以通過設定display:block來改變其顯示。

content屬性可取這些值:string、attr()、url()/uri()、counter()

具體見:

偽類和偽元素

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

偽類和偽元素

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

偽類和偽元素

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