前言
在 CSS 的世界里，单冒号 : 和双冒号 :: 并不是随心所欲使用的。它们分别代表了伪类和伪元素。理解它们的区别，不仅能帮你写出更优雅的选择器，还能在面试中展示扎实的基础。
一、 核心区别：它们到底是什么？
-
伪类 (Pseudo-classes) ：
- 本质：代表一种状态。
- 作用：当元素处于某种特定状态时（如鼠标悬停、获得焦点、被选中），为其添加样式。它选择的是已存在的元素。
- 语法：使用单冒号
:（如:hover）。
-
伪元素 (Pseudo-elements) ：
- 本质：代表一种虚拟内容。
- 作用：创建一个不在 DOM 树中的“虚拟元素”。例如，为一个段落的开头添加一个字母，或者在元素前后插入修饰性的内容。
- 语法：CSS3 规范建议使用双冒号
::（如::after），以区分伪类。
二、 常用伪类：状态与结构选择
伪类可以分为行为伪类、结构伪类和表单伪类。
1. 行为与状态伪类
| 选择器 | 含义 |
|---|---|
E:link | 匹配未访问的链接 |
E:visited | 匹配已访问的链接 |
E:hover | 鼠标悬停在元素上 |
E:active | 鼠标按下尚未释放（激活状态） |
E:focus | 元素获得焦点（如输入框点击后） |
2. 结构伪类
| 选择器 | 含义 |
|---|---|
E:first-child | 匹配父元素的第一个子元素，且该子元素必须是 E |
E:last-child | 匹配父元素的最后一个子元素，且该子元素必须是 E |
E:nth-child(n) | 匹配父元素中第 n 个子元素（n 可以是数字、关键字或公式） |
E:first-of-type | 匹配同类型兄弟元素中的第一个 E |
E:only-child | 匹配父元素中唯一的子元素 |
3. 表单相关伪类
| 选择器 | 含义 |
|---|---|
E:enabled | 匹配可用的表单元素 |
E:disabled | 匹配被禁用的表单元素 |
E:checked | 匹配单选框或复选框被选中的状态 |
三、 常用伪元素：内容与样式扩展
伪元素在 CSS3 规范中统一使用双冒号 ::。
| 选择器 | 含义 | 场景 |
|---|---|---|
::before | 在 E 元素内容的最前面插入内容 | 字体图标、修饰性装饰 |
::after | 在 E 元素内容的最后面插入内容 | 清除浮动、对话框小箭头 |
::first-line | 匹配 E 元素的第一行文字 | 杂志风格的排版 |
::first-letter | 匹配 E 元素的第一个字母 | 首字下沉效果 |
::selection | 匹配用户在页面上选中的文本 | 自定义选中文本的颜色 |
四、 深度辨析：nth-child vs nth-of-type
这是面试中最常被问到的细节：
p:nth-child(2)：选择父元素的第二个子元素，如果这个子元素是<p>，则应用样式。如果第二个子元素是<div>，则选择失败。p:nth-of-type(2)：选择父元素下第二个<p>类型的子元素，不考虑非<p>标签。
💡 总结
- 伪类是用来增强选择器的，描述的是状态（如被点击、被移动）。
- 伪元素是用来创建新内容的，虽然在 HTML 里看不到，但在 CSS 中可以操作。
- 写代码时，尽量遵循 CSS3 规范：状态用单冒号，内容用双冒号。
