偽類與偽元素的區別：

1.偽類使用單冒號，而偽元素使用雙冒號。如 :hover 是偽類，::before 是偽元素
2.偽元素會在文檔流生成一個新的元素，但偽元素本身并不是DOM元素，并且可以使用 content 屬性設置內容

---

CSS偽類與偽元素選擇器列舉

偽元素

• ::before
• ::after
• ::selection
• ::placeholder
• ::marker

偽類

• :hover
• :first-child
• :last-child
• :nth-child

選擇器	例子	例子描述
:active	a:active	選擇活動的鏈接。
:checked	input:checked	選擇每個被選中的 元素。
:disabled	input:disabled	選擇每個被禁用的 元素。
:empty	p:empty	選擇沒有子元素的每個元素。
:enabled	input:enabled	選擇每個已啟用的 元素。
:first-child	p:first-child	選擇作為其父的首個子元素的每個元素。
:first-of-type	p:first-of-type	選擇作為其父的首個元素的每個元素。
:focus	input:focus	選擇獲得焦點的 元素。
:hover	a:hover	選擇鼠標懸停其上的鏈接。
:in-range	input:in-range	選擇具有指定范圍內的值的 元素。
:invalid	input:invalid	選擇所有具有無效值的 元素。
:lang(language)	p:lang(it)	選擇每個 lang 屬性值以 “it” 開頭的元素。
:last-child	p:last-child	選擇作為其父的最后一個子元素的每個元素。
:last-of-type	p:last-of-type	選擇作為其父的最后一個元素的每個元素。
:link	a:link	選擇所有未被訪問的鏈接。
:not(selector)	:not§	選擇每個非元素的元素。
:nth-child(n)	p:nth-child(2)	選擇作為其父的第二個子元素的每個元素。
:nth-last-child(n)	p:nth-last-child(2)	選擇作為父的第二個子元素的每個元素，從最后一個子元素計數。
:nth-last-of-type(n)	p:nth-last-of-type(2)	選擇作為父的第二個元素的每個元素，從最后一個子元素計數
:nth-of-type(n)	p:nth-of-type(2)	選擇作為其父的第二個元素的每個元素。
:only-of-type	p:only-of-type	選擇作為其父的唯一元素的每個元素。
:only-child	p:only-child	選擇作為其父的唯一子元素的元素。
:optional	input:optional	選擇不帶 “required” 屬性的 元素。
:out-of-range	input:out-of-range	選擇值在指定范圍之外的 元素。
:read-only	input:read-only	選擇指定了 “readonly” 屬性的 元素。
:read-write	input:read-write	選擇不帶 “readonly” 屬性的 元素。
:required	input:required	選擇指定了 “required” 屬性的 元素。
:root	root	選擇元素的根元素。
:target	#news:target	選擇當前活動的 #news 元素（單擊包含該錨名稱的 URL）。
:valid	input:valid	選擇所有具有有效值的 元素。
:visited	a:visited	選擇所有已訪問的鏈接。