第二章 · 2.4 节
伪类选择器
伪类以冒号 : 开头，描述元素的某种"状态"或"结构位置"，而这种状态往往无法通过 class 或 HTML 结构直接体现——比如鼠标是否悬停、是不是第一个子元素。
交互状态伪类
| 伪类 | 触发条件 |
|---|---|
| :hover | 鼠标悬停在元素上 |
| :active | 元素被按下的瞬间 |
| :focus | 元素获得键盘 / 程序焦点 |
| :focus-visible | 仅在焦点应被"可见"呈现时触发（如键盘 Tab） |
| :visited | 链接已被访问过 |
.btn:hover { background: #3f5d54; } .btn:focus-visible { outline: 2px solid #8a5a2e; }
可访问性请始终保留
:focus-visible 的可见轮廓样式，键盘用户依赖它判断当前焦点位置，移除它会造成严重的可用性问题。结构性伪类
| 伪类 | 含义 |
|---|---|
| :first-child | 是父元素的第一个子元素 |
| :last-child | 是父元素的最后一个子元素 |
| :only-child | 是父元素唯一的子元素 |
| :first-of-type | 是同类型标签中第一个 |
| :empty | 没有任何子节点（含文本） |
| :root | 文档根元素，即 <html> |
li:not(:last-child) { border-bottom: 1px solid #c9cabf; }
效果预览：除最后一项外都有下边框
选择器
伪元素
媒体查询
nth-child 公式详解
:nth-child(An+B) 是结构性伪类中最强大也最容易混淆的一个，其中 n 从 0 开始自增。
| 写法 | 命中项 |
|---|---|
| :nth-child(2n) | 第 2、4、6… 个（偶数） |
| :nth-child(2n+1) | 第 1、3、5… 个（奇数） |
| :nth-child(3n) | 第 3、6、9… 个 |
| :nth-child(-n+3) | 前 3 个 |
| :nth-last-child(1) | 倒数第 1 个，等价于 :last-child |
/* 斑马纹表格 */ tr:nth-child(even) { background: #e7e8e1; }
易错点
:nth-child 是在"所有兄弟元素"中计数，与标签类型无关；若只想在同类型标签中计数，需要使用 :nth-of-type。表单相关伪类
input:required { border-color: #8a5a2e; } input:invalid { border-color: #b3452c; } input:checked + label { color: #3f5d54; } input:disabled { opacity: .5; }
常用的还有 :placeholder-shown（占位符可见时）与 :in-range / :out-of-range（数值是否在 min/max 范围内），都无需 JavaScript 即可实现表单校验的视觉反馈。
逻辑组合伪类
CSS 提供了四个"函数式"伪类，可以像逻辑运算一样组合其他选择器：
| 伪类 | 作用 |
|---|---|
| :not(s) | 排除匹配 s 的元素 |
| :is(s1, s2) | 匹配任一 s，优先级取参数中最高者 |
| :where(s1, s2) | 与 :is 相同，但优先级恒为 0 |
| :has(s) | 匹配内部包含 s 的元素（父选择器） |
/* 给包含图片的卡片单独加边距 —— :has 让"父选择子"成为可能 */ .card:has(img) { padding-bottom: 0; }