1. 程式人生 > >css中的單冒號和雙冒號 以及 偽類和偽元素

css中的單冒號和雙冒號 以及 偽類和偽元素

分配 子元素 不可 技術 對象 htm 而且 原因 支持

單冒號(:)用於CSS3偽類,雙冒號(::)用於CSS3偽元素。 偽元素由雙冒號和偽元素名稱組成。雙冒號是在css3規範中引入的,用於區分偽類和偽元素。但是偽類兼容現存樣式,瀏覽器需要同時支持舊的偽類,比如:first-line、:first-letter、:before、:after

1、偽類與偽元素

  什麽叫偽類呢?

  偽類是基於元素的特征而不是他們的id、class、屬性或者內容。一般來說,元素的特征是不可以從DOM樹上推斷得到的,而且其是動態的,當用戶和DOM進行交互的時候,元素可以獲得或者失去一個偽類。(這裏有一個例外,就是:first-child:lang是可以從  DOM樹中推斷出來的。)

技術分享圖片

  CSS偽元素:用於將特殊的效果添加到某些選擇器。偽元素代表了某個元素的子元素,這個子元素雖然在邏輯上存在,但卻並不實際存在於文檔樹中。

  偽元素是創造文檔樹之外的對象。例如文檔不能提供訪問元素內容第一字或者第一行的機制。偽元素還提供一些在源文檔中不存在的內容分配樣式,例如:before:after能夠訪問產生的內容。偽元素的內容實際上和普通DOM元素是相同的,但是它本身只是基於元素 的抽象,並不存在於文檔中,所以叫偽元素。
技術分享圖片

偽類的效果可以通過添加一個實際的類來達到,而偽元素的效果則需要通過添加一個實際的元素才能達到,這也是為什麽他們一個稱為偽類,一個稱為偽元素的原因。
CSS3為了區分偽類和偽元素,已經明確規定了偽類用一個冒號來表示,而偽元素則用兩個冒號來表示。但因為兼容性的問題,所以現在大部分還是統一的單冒號,但是拋開兼容性的問題,我們在書寫時應該盡可能養成好習慣,區分兩者。
單冒號(:)用於css3偽類,雙冒號(::)用於CSS3偽元素。偽元素由雙冒號和偽元素名稱組成。不過瀏覽器需要同時支持舊 的已經存在的偽元素寫法,比如:first-line、:first-letter、:before、:after等,而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。

2、CSS3新增偽類
技術分享圖片

兩者之間區別

首先說一下偽類偽元素的相同之處,

偽類和偽元素都不出現在源文件和文檔樹中。也就是說在html源文件中是看不到偽類和偽元素的。

他們的不同之處,

偽類其實就是基於普通DOM元素而產生的不同狀態,他是DOM元素的某一特征。偽元素能夠創建在DOM樹中不存在的抽象對象,而且這些抽象對象是能夠訪問到的。

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

css中的單冒號和雙冒號 以及 偽類和偽元素