偽類與偽元素，很常讓人突然想不起誰是誰？好像是雙胞胎似的。剛開始學的時候真的頭很大，後來發現這兩位很不同功能啊，也聽說，2.2版本時，他們都是（:），都只有一個冒號，如果你偽元素不小心寫成（:）瀏覽器還是會認得出來呦，今天就來認識一下這兩位仁兄吧！本次搭配：

• 最新版已經到了Selectors Level 4，但還在第二階段的W3C Working Draft，這次主要是看Selectors Level 3，目前處於 W3C Recommendation第三階段。
• MDN CSS selectors 搭配MDN一起來看，會有範例比較好懂。

偽類（:）Pseudo-classes

由以下目錄可見，偽類有這七種分類。而偽類屬於6. Simple selectors。
Level3 6.6 Pseudo-classes 偽類
6.6.1.Dynamic pseudo-classes 動態偽類
6.6.2.The target pseudo-class 目標偽類:target
6.6.3.The language pseudo-class 語言偽類 :lang
6.6.4.The UI element states pseudo-classesUI 元素聲明偽類
6.6.5.Structural pseudo-classes 結構偽類
6.6.6.Blank
6.6.7.The negation pseudo-class 否定偽類

看看規範說什麼

level3

• 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.
• A pseudo-class always consists of a "colon" (:) followed by the name of the pseudo-class and optionally by a value between parentheses.
• Pseudo-classes are allowed in all sequences of simple selectors contained in a selector.
• Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted).
• Pseudo-class names are case-insensitive.
• Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element.
  -Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.

由規範得知，

• 引入偽類概念是為了允許基於文檔樹之外的資訊或無法使用其他簡單選擇器表達的資訊進行選擇。
• 偽類別總是包含一個「冒號」(:)，後面跟著一個偽類別的名稱，也可以選擇在括號之間加上一個值。
• 選擇器中包含的所有簡單選擇器序列都允許使用偽類。
• 偽類允許在簡單選擇器序列中的任何位置，在前導類型選擇器或通用選擇器（可能省略）之後。
• 偽類名稱不區分大小寫。
• 有些偽類是互斥的，而有些偽類可以同時應用於同一元素。
• 偽類可以是動態的，在某種意義上，當使用者與文件互動時，元素可以取得或遺失偽類。

偽元素（::）Pseudo-elements

規範目錄

由目錄可見，偽元素有這四種分類。

Level3 7 Pseudo-elements 偽元素
7.1.The ::first-line pseudo-element
7.2.The ::first-letter pseudo-element
7.3.Blank
7.4.The ::before and ::after pseudo-elements

看看規範說什麼

• Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content.
• Pseudo-elements allow authors to refer to this otherwise inaccessible information.
• Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).
• A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.
• This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements.
• Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector.

由規範得知，

• 偽元素會建立超出文檔語言指定的有關文檔樹的抽象。例如，文件語言不提供存取元素內容的第一個字母或第一行的機制。
• 偽元素允許作者引用這些原本無法存取的資訊。
• 偽元素還可以為作者提供一種引用來源文件中不存在的內容的方法（例如，::before 和 ::after 偽元素可以存取生成的內容）。
• 偽元素由兩個冒號 (::) 後面接著偽元素的名稱組成。 目前文件引入這個 :: 符號是為了區分偽類和偽元素。
• 每個選擇器只能出現一個偽元素，如果存在，它必須出現在代表選擇器主題的簡單選擇器序列之後。
• 本規範的未來版本可能允許每個選擇器有多個偽元素。

小結與使用心得

他們都是在選擇器這篇章下的內容，但分不同組啊，一個是在simple selector，一個像是組合器那樣自己獨立一小節，功能各不同，簡單分類：

偽類 Pseudo-classes

• 為了選擇 DOM tree 之外的信息，或者使用其他簡單選擇器不能表達的信息。例如：設定滑鼠滑過(:hover)、被訪問過的連結樣式(:visited)。
• 偽類pseudo-class跟CSS class一樣都屬於 class ，它的優先權也就跟class是一樣的。
• 更多操作範例可參考 MDN Pseudo-classes

偽元素 Pseudo-elements

• 創造關於 DOM tree的抽象內容，提供方法來引用源文檔中『不存在』的內容，較常用的是 ::before ::after ，來做些特殊效果或裝飾，不管是線線，還是點點，任君挑選。
• 為了網站SEO，建議偽元素使用在裝飾性的物件，別使用於有具體意義項目，會怪怪的，你知道的。
• 更多操作範例可參考 MDN CSS pseudo-elements