CSS 选择器速查
基本选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
| * | * | 通配符，匹配所有元素 |
| E | div | 元素选择器，匹配所有指定类型的元素 |
| .class | .container | 类选择器，匹配所有包含指定 class 的元素 |
| #id | #header | ID 选择器，匹配具有指定 ID 的唯一元素 |
| E, F | h1, h2 | 分组选择器，匹配 E 或 F 任一元素 |
组合选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
| E F | div p | 后代选择器，匹配 E 元素内所有的 F 后代元素（含子、孙等） |
| E > F | ul > li | 子元素选择器，仅匹配 E 的直接子元素 F |
| E + F | h1 + p | 相邻兄弟选择器，匹配紧跟在 E 后面的第一个兄弟元素 F |
| E ~ F | h1 ~ p | 通用兄弟选择器，匹配 E 后面所有的兄弟元素 F |
属性选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
| [attr] | [disabled] | 匹配具有该属性的元素 |
| [attr=val] | [type="text"] | 匹配属性值完全等于 val 的元素 |
| [attr~=val] | [class~="btn"] | 匹配属性值中包含独立单词 val 的元素 |
| [attr|=val] | [lang|="zh"] | 匹配属性值等于 val 或以 val- 开头的元素 |
| [attr^=val] | [href^="https"] | 匹配属性值以 val 开头的元素 |
| [attr$=val] | [href$=".pdf"] | 匹配属性值以 val 结尾的元素 |
| [attr*=val] | [class*="card"] | 匹配属性值包含 val 子串的元素 |
| [attr=val i] | [type="text" i] | 属性值匹配时忽略大小写 |
伪类选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
| :link | a:link | 未访问过的链接 |
| :visited | a:visited | 已访问过的链接 |
| :hover | a:hover | 鼠标悬停时 |
| :active | button:active | 元素被激活（鼠标按下）时 |
| :focus | input:focus | 获得焦点时 |
| :focus-within | form:focus-within | 自身或后代元素获得焦点时 |
| :focus-visible | input:focus-visible | 获得焦点且浏览器认为应显示焦点指示器时 |
| :first-child | li:first-child | 父元素的第一个子元素 |
| :last-child | li:last-child | 父元素的最后一个子元素 |
| :nth-child(n) | li:nth-child(2) | 父元素的第 n 个子元素（n 从 1 开始） |
| :nth-last-child(n) | li:nth-last-child(2) | 父元素的倒数第 n 个子元素 |
| :first-of-type | p:first-of-type | 同类型元素中的第一个 |
| :last-of-type | p:last-of-type | 同类型元素中的最后一个 |
| :nth-of-type(n) | p:nth-of-type(2) | 同类型元素中的第 n 个 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同类型元素中的倒数第 n 个 |
| :only-child | span:only-child | 父元素的唯一子元素 |
| :only-of-type | span:only-of-type | 父元素中同类型的唯一子元素 |
| :not(s) | :not(.hidden) | 否定伪类，匹配不符合选择器 s 的元素 |
| :is(s) | :is(h1, h2, h3) | 匹配选择器列表中任一元素的简化语法 |
| :where(s) | :where(h1, h2) | 同 :is()，但优先级始终为 0 |
| :has(s) | a:has(img) | 包含指定子元素的元素 |
| :empty | div:empty | 没有任何子节点（含文本节点）的空元素 |
| :root | :root | 文档的根元素（HTML 中为 <html>） |
| :checked | input:checked | 被选中的表单控件（checkbox/radio） |
| :disabled | input:disabled | 被禁用的表单元素 |
| :enabled | input:enabled | 未被禁用的表单元素 |
| :required | input:required | 设置了 required 属性的表单元素 |
| :optional | input:optional | 未设置 required 的表单元素 |
| :valid | input:valid | 通过表单验证的元素 |
| :invalid | input:invalid | 未通过表单验证的元素 |
| :placeholder-shown | input:placeholder-shown | 显示占位符文本的表单元素 |
| :target | :target | URL 哈希指向的元素（锚点目标） |
| :lang(lang) | p:lang(zh) | 指定语言的元素 |
伪元素选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
| ::before | p::before | 在元素内容前插入生成内容 |
| ::after | p::after | 在元素内容后插入生成内容 |
| ::first-line | p::first-line | 元素内容的第一行 |
| ::first-letter | p::first-letter | 元素内容的第一个字母 |
| ::selection | ::selection | 用户选中的文本内容 |
| ::placeholder | input::placeholder | 表单元素的占位符文本 |
| ::marker | li::marker | 列表项的标记符号（圆点/数字等） |
| ::backdrop | dialog::backdrop | 对话框元素后面的背景遮罩 |
常用组合示例
| 选择器 | 示例 | 说明 |
|---|---|---|
| E F G | ul li a | 嵌套后代：ul 内 li 内的所有 a 标签 |
| E > F > G | ul > li > a | 直接子元素链式：ul 直接子 li 的直接子 a |
| E.class | div.container | 匹配具有指定 class 的特定类型元素 |
| E#id | form#login | 匹配具有指定 ID 的特定类型元素 |
| E.class#id | div.card#main | 类型 + class + ID 组合匹配 |
| E[attr=val]:hover | a[href]:hover | 属性选择器 + 伪类组合 |
| E:nth-child(odd) | tr:nth-child(odd) | 奇数行（等价于 2n+1） |
| E:nth-child(even) | tr:nth-child(even) | 偶数行（等价于 2n） |
| E:nth-child(3n+1) | li:nth-child(3n+1) | 每 3 个中的第 1 个（1, 4, 7, ...） |
| E:is(A, B, C) | :is(section, article) h1 | section 或 article 内的 h1 |
选择器优先级
| 类型 | 权重值 | 示例 |
|---|---|---|
| 行内样式 | 1,0,0,0 | style="..." |
| ID 选择器 | 0,1,0,0 | #header |
| 类/属性/伪类 | 0,0,1,0 | .active, [type="text"], :hover |
| 元素/伪元素 | 0,0,0,1 | div, ::before |
| 通配符 | 0,0,0,0 | * |