伪类与伪元素

• 伪类：以冒号(:)开头，用于选择处于特定状态的元素。
• 伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。

伪类

按照功能，可划分为以下几类：

• 动态伪类：:visited、:focus、:hover等
• 状态伪类：:disabled、:empty、:required 等
• 结构伪类：:first-child、:nth-of-type等
• 其他伪类：:target、:lang、:not()等

下面的表格详细记录了各种伪类及其描述：

伪类	描述	兼容性
:active	元素处于活动状态时	✅
:focus	元素已获取焦点时	✅
:hover	元素处于悬浮状态时	✅
:link	链接未访问时	✅
:visited	链接已访问时	✅
:first-child	元素是首个子元素时	✅
:last-child	元素是最后一个子元素时	✅
:nth-child()	元素是第 n 个子元素时	✅
:nth-last-child()	元素是倒数第 n 个子元素时	✅
:only-child	元素是唯一子元素时	✅
:first-of-type	元素是首个特定类型的子元素时	✅
:last-of-type	元素是最后一个特定类型的子元素时	✅
:nth-of-type()	元素是第 n 个特定类型的子元素时	✅
:nth-last-of-type()	元素是倒数第 n 个特定类型的子元素时	✅
:only-of-type	元素是唯一的特定类型的子元素时	✅
:not	不满足指定条件时	✅
:target	元素 id 匹配到哈希值时	✅
:root	元素是文档树的根元素时	✅
:lang()	匹配到指定语言时	✅
:empty	元素处于没有子元素状态时	✅
:invalid 和 :valid	表单项是否有效	✅
:required 和 :optional	表单项是否必填	✅
:in-range和 :out-of-range	表单项是否超出范围	✅
:read-only和 :read-write	表单项是否只读	✅
:enabled和 :disabled	表单项是否禁用	✅
:fullscreen	当前处于全屏显示模式时	⚠️
:blank	输入框处于输入为空状态时	❌
:dir()	匹配到特定文字书写方向时	❌

上表中的兼容性表示：

• ✅ 代表主流浏览器都支持（至少 95% 以上）
• ❌ 代表大部分主浏览器都不支持（仅 20% 以下浏览器实现该特性）
• ⚠️ 代表部分浏览器支持（可能需要加前缀，例如 :webkit-或 :-moz-等）

---

伪元素

与伪类相比伪元素就少很多了，常用的如下：

伪元素	选中或创建出来的元素	兼容性
::first-letter	选中块状元素中的首字母	✅
::first-line	选中首行	✅
::before	在之前创建一个不在文档树中的元素	✅
::after	在之后创建一个不在文档树中的元素	✅
::placeholder	选中表单元素的占位文本	✅
::file-selector-button	选中类型为 file 的 input 里面的 button	✅
::selection	选中被用户高亮的部分	⚠️
::backdrop	选中视觉聚焦元素后面的背景元素	⚠️
::marker	选中 list 的 marker	⚠️

经典案例分析