2.3 伪类与伪元素
普通选择器选的是“实实在在存在的元素”。但有时我们想选中元素的某种状态（比如“鼠标正悬停时”）或某个位置（比如“第一个孩子”），甚至想“凭空”加一点内容。这就是伪类和伪元素登场的时候。
下面的实验让你切换几种常见伪类/伪元素，实时看效果。
正在加载交互实验...
伪类：元素的“特殊状态”（单冒号 :）
伪类用一个冒号开头，描述元素此刻处于什么状态或在什么位置。
和交互有关的状态：
css
a:hover { color: red; } /* 鼠标悬停时 */
a:active { color: orange; } /* 正在被按下时 */
input:focus { outline: 2px solid blue; } /* 输入框被聚焦时 */:hover 是最常用的伪类之一——按钮、链接的悬停高亮全靠它。
和位置有关的状态：
css
li:first-child { font-weight: bold; } /* 父元素里的第一个 li */
li:last-child { border: none; } /* 最后一个 li */
li:nth-child(even) { background: #f1f5f9; } /* 偶数项，做斑马条纹 */正在加载概念检查...
伪元素：“凭空”造出来的部分（双冒号 ::）
伪元素用两个冒号开头，它能选中元素的一部分，或者在元素前后插入内容。
css
/* 在每个 .quote 前面加一个引号 */
.quote::before {
content: "“";
color: gray;
}
/* 选中段落的第一行 / 首字母 */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 200%; }最常用的是 ::before 和 ::after，配合 content 属性使用。它们常用来加图标、装饰线、引号等“纯装饰”的内容——这些内容不写在 HTML 里，纯靠 CSS 生成。
注意
一个冒号还是两个？ 历史原因：伪类（:hover、:first-child）用一个冒号，伪元素（::before、::after）用两个冒号。不过浏览器对老式的单冒号伪元素也兼容，所以你有时会看到
:before。新代码建议遵守“伪元素两个冒号”的规范。正在加载概念检查...
常见伪类/伪元素速查
| 写法 | 类型 | 含义 |
|---|---|---|
:hover | 伪类 | 鼠标悬停 |
:focus | 伪类 | 获得焦点（如点进输入框） |
:first-child | 伪类 | 父元素的第一个子元素 |
:nth-child(even) | 伪类 | 偶数位置的子元素 |
::before / ::after | 伪元素 | 在内容前/后插入生成内容 |
正在加载本节练习...