偽類與偽元素

2022-04-08 16:41:39 字數 912 閱讀 5435

總結一下偽類與偽元素的特性及其區別:

偽類本質上是為了彌補常規css選擇器的不足,以便獲取到更多資訊;

偽元素本質上是建立了乙個有內容的虛擬容器

css3中偽類和偽元素的語法不同;   偽類  :link  :hover         偽元素  ::before    ::after

可以同時使用多個偽類,而只能同時使用乙個偽元素;

其中偽類和偽元素的根本區別在於:它們是否創造了的元素,,   這個新創造的元素就叫  "偽無素" 。

偽元素/偽物件:不存在在dom文件中,是虛擬的元素,是建立新元素。 這個新元素(偽元素)  是某個元素的子元素,這個子元素雖然在邏輯上存在,但卻並不實際存在於文件樹中.

偽類:存在dom文件中,(無標籤,找不到,  只有符合觸發條件時才能看到 ),  邏輯上存在但在文件樹中卻無須標識的「幽靈」分類。

6.  因為偽類是類似於新增類所以可以是多個,而偽元素在乙個選擇器中只能出現一次,並且只能出現在末尾 

7.   w3c中對於二者應用的描述(描述太模糊, 不容易理解):

相同點不同點

注意:偽物件要配合content屬性一起使用

偽物件不會出現在dom中,所以不能通過js來操作,僅僅是在 css 渲染層加入

偽物件的特效通常要使用:hover偽類樣式來啟用

eg:當滑鼠移在span上時,span前插入」duang」

<

style

>

span

span:hover::before

style

>

<

span

>222

span

>

偽類與偽元素

偽類 用於向某些選擇器新增特殊的效果,當已用元素處於某種狀態時,為其新增對應的樣式 偽元素 用於將特殊的效果新增到某些選擇器,用於建立一些不存在文件樹中的元素,為其新增樣式 區別 使用偽元素清除浮動 class container clearfix class wrap aaadiv div cle...

偽類與偽元素?

偽類與偽元素?偽類指偽類名稱前為冒號 偽元素指偽元素名稱前為雙冒號 偽類本質上是為了彌補常規css選擇器的不足,以便獲取到更多資訊。通常表示獲取不存在與dom樹中的資訊,或獲取不能被常規css選擇器獲取的資訊。如 hover focus empty 本質上是建立了乙個有內容的虛擬容器。這個容器不包含...

偽類與偽元素

一 偽類 1 定義 css偽類用於向某些選擇器新增特殊效果。偽類其實與普通的css類相類似,可以為已有的元素新增樣式,但是他只有處於dom無法描述的狀態下才能為文件樹中的元素新增樣式,所以將其稱為偽類。這種文件樹無法描述的狀態是什麼呢?當乙個元素在使用者的不同行為下就變化成不同的狀態這個行為的變化d...