偽類與虛擬元素的區別

標籤：http   strong   readonly   rod   指定   區別   rmi   coder   內容   

??在CSS1和CSS2中對偽類和偽選取器沒有做出很明顯的區別定義，而二者在文法是一樣的，都是以:開頭，這造成很多人會將某些虛擬元素誤認為是偽類，如:before，:after；而在CSS3給出的定義中，二者區別更為明顯，也更容易理解。

一、定義

• 偽類

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

??解讀：偽類用於選擇DOM樹之外的資訊，或是不能用簡單選取器進行表示的資訊。前者包含那些匹配指定狀態的元素，比如:visited，:active；後者包含那些滿足一定邏輯條件的DOM樹中的元素，比如:first-child，:first-of-type，：target。

• 虛擬元素

Pseudo-elements create abstractions about the document tree beyond those specified by the document language.

??解讀：虛擬元素為DOM樹沒有定義的虛擬元素。不同於其他選取器，它不以元素為最小選擇單元，它選擇的是元素指定內容。比如::before表示選擇元素內容的之前內容，也就是""；::selection表示選擇元素被選中的內容。

二、文法

??在CSS3中，偽類與虛擬元素在文法上也有所區別，虛擬元素修改為以::開頭。但因為曆史原因，瀏覽器對以:開頭的虛擬元素也繼續支援，但建議規範書寫為::開頭。

三、偽類/虛擬元素一覽表

• 偽類

  Selector	Meaning	CSS
  :active	選擇正在被啟用的元素	1
  :hover	選擇被滑鼠懸浮著元素	1
  :link	選擇未被訪問的元素	1
  :visited	選擇已被訪問的元素	1
  :first-child	選擇滿足是其父元素的第一個子項目的元素	2
  :lang	選擇帶有指定 lang 屬性的元素	2
  :focus	選擇擁有鍵盤輸入焦點的元素	2
  :enable	選擇每個已啟動的元素	3
  :disable	選擇每個已禁止的元素	3
  :checked	選擇每個被選中的元素	3
  :target	選擇當前的錨點元素	3
  :first-of-type	選擇滿足是其父元素的第一個某類型子項目的元素	3
  :last-of-type	選擇滿足是其父元素的最後一個某類型子項目的元素	3
  :only-of-type	選擇滿足是其父元素的唯一一個某類型子項目的元素	3
  :nth-of-type(n)	選擇滿足是其父元素的第n個某類型子項目的元素	3
  :nth-last-of-type(n)	選擇滿足是其父元素的倒數第n個某類型的元素	3
  :only-child	選擇滿足是其父元素的唯一一個子項目的元素	3
  :last-child	選擇滿足是其父元素的最後一個元素的元素	3
  :nth-child(n)	選擇滿足是其父元素的第n個子項目的元素	3
  :nth-last-child(n)	選擇滿足是其父元素的倒數第n個子項目的元素	3
  :empty	選擇滿足沒有子項目的元素	3
  :in-range	選擇滿足值在指定範圍內的元素	3
  :out-of-range	選擇值不在指定範圍內的元素	3
  :invalid	選擇滿足值為無效值的元素	3
  :valid	選擇滿足值為有效值的元素	3
  :not(selector)	選擇不滿足selector的元素	3
  :optional	選擇為可選項的表單元素，即沒有“required”屬性	3
  :read-only	選擇有"readonly"的表單元素	3
  :read-write	選擇沒有"readonly"的表單元素	3
  :root	選擇根項目	3

注意：p:first-child表示選擇的元素既要是p標籤，同時要是其父元素的第一個子項目，不要錯誤認為是表示p元素的第一個子項目；同理，p:first-of-type表示選擇的元素要是p標籤，同時要是其父元素的第一個p標籤元素；其他類似的偽類含義相似。

• 虛擬元素

  Selector	Meaning	CSS
  ::first-letter	選擇指定元素的第一個單詞	1
  ::first-line	選擇指定元素的第一行	1
  ::after	在指定元素的內容前面插入內容	2
  ::before	在指定元素的內容後面插入內容	2
  ::selection	選擇指定元素中被使用者選中的內容	3

參考連結

[1] w3schools.com；

[2] CSS3偽類和虛擬元素的特性和區別;

原文：https://www.cnblogs.com/ammyben/p/8012747.html

偽類與虛擬元素的區別