1. 程式人生 > >css偽類與偽元素區別

css偽類與偽元素區別

偽類

偽類就是一種虛構的狀態或者說是一個具有特殊屬性的元素可以使用CSS進行樣式修飾。
偽類選擇元素基於的是當前元素處於的狀態,或者說元素當前所具有的特性,而不是元素的id、class、屬性等靜態的標誌。由於狀態是動態變化的,所以一個元素達到一個特定狀態時,它可能得到一個偽類的樣式;當狀態改變時,它又會失去這個樣式。由此可以看出,它的功能和class有些類似,但它是基於文件之外的抽象,所以叫偽類。

特點:
1.獲取不存在與DOM樹中的資訊。比如a標籤的:link、visited等,這些資訊不存在與DOM樹結構中,只能通過CSS選擇器來獲取;
2.獲取不能被常規CSS選擇器獲取的資訊。
3.使用單冒號:
在這裡插入圖片描述

偽元素

偽元素,是在 DOM 樹中建立了一些抽象元素,這些抽象元素是不存在於文件流 中的。

偽元素是對元素中的特定內容進行操作,它所操作的層次比偽類更深了一層,也因此它的動態性比偽類要低得多。實際上,設計偽元素的目的就是去選取諸如元素內容第一個字(母)、第一行,選取某些內容前面或後面這種普通的選擇器無法完成的工作。它控制的內容實際上和元素是相同的,但是它本身只是基於元素的抽象,並不存在於文件中,所以叫偽元素。

特點
1.css3規定使用雙冒號(::)表示
2.由於相容性問題,所以現在大部分還是統一單冒號(:),因為除了IE8及其以下版本不支援雙冒號(::)外,其他都支援。
常見的幾種偽元素是: :after , :before 以及 :first-letter。

根本區別:是否建立了新元素