CSS 选择器参考文档完善
2025年3月4日大约 10 分钟
CSS 选择器参考文档完善
我将为您完善 CSS 选择器参考文档，添加更多选择器类型和详细信息。
---
title: CSS 选择器参考
icon: css
order: 1
---
# CSS 选择器参考
CSS 选择器用于选择要应用样式的 HTML 元素。本文档提供了 CSS 选择器的完整参考。
## 基本选择器
| 选择器 | 描述 | 示例 |
|-------|------|------|
| [通配选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors) | 选择所有元素 | `*` |
| [类型选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors) | 选择指定类型的元素 | `div` |
| [类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors) | 选择具有指定类的元素 | `.classname` |
| [ID 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors) | 选择具有指定 ID 的元素 | `#idname` |
| [属性选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors) | 选择具有指定属性的元素 | `[attr]` |
| [属性值选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors) | 选择属性等于指定值的元素 | `[attr=value]` |
| [属性包含选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors) | 选择属性包含指定值的元素 | `[attr~=value]` |
| [属性值开头选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors) | 选择属性值以指定值开头的元素 | `[attr^=value]` |
| [属性值结尾选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors) | 选择属性值以指定值结尾的元素 | `[attr$=value]` |
| [属性值包含子串选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors) | 选择属性值包含指定子串的元素 | `[attr*=value]` |
| [属性值连字符选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors) | 选择属性值等于指定值或以指定值开头后跟连字符的元素 | `[attr|=value]` |
| [命名空间属性选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors) | 选择具有特定命名空间的属性的元素 | `[ns\|attr=value]` |
## 关系选择器
| 选择器 | 描述 | 示例 |
|-------|------|------|
| [后代选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Descendant_combinator) | 选择元素的后代 | `div p` |
| [子组合器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Child_combinator) | 选择元素的直接子元素 | `div > p` |
| [相邻兄弟组合器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Next-sibling_combinator) | 选择紧接在另一元素后的元素 | `div + p` |
| [后续兄弟选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Subsequent-sibling_combinator) | 选择前一个元素之后的所有兄弟元素 | `div ~ p` |
| [列组合器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Column_combinator) | 选择同一网格列中的元素（实验性） | `div || p` |
## 伪类选择器
伪类用于定义元素的特殊状态。
### 常用伪类
| 选择器 | 描述 | 示例 |
|-------|------|------|
| [:hover](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover) | 选择鼠标悬停在其上的元素 | `a:hover` |
| [:active](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:active) | 选择被激活的元素（如点击时） | `button:active` |
| [:focus](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus) | 选择获得焦点的元素 | `input:focus` |
| [:visited](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited) | 选择已被访问的链接 | `a:visited` |
| [:link](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:link) | 选择未被访问的链接 | `a:link` |
| [:first-child](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-child) | 选择作为其父元素的第一个子元素的元素 | `li:first-child` |
| [:last-child](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-child) | 选择作为其父元素的最后一个子元素的元素 | `li:last-child` |
| [:nth-child(n)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child) | 选择作为其父元素的第 n 个子元素的元素 | `li:nth-child(2)` |
| [:nth-last-child(n)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-child) | 选择作为其父元素的倒数第 n 个子元素的元素 | `li:nth-last-child(2)` |
| [:first-of-type](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-of-type) | 选择作为其父元素的特定类型的第一个子元素的元素 | `p:first-of-type` |
| [:last-of-type](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-of-type) | 选择作为其父元素的特定类型的最后一个子元素的元素 | `p:last-of-type` |
| [:nth-of-type(n)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type) | 选择作为其父元素的特定类型的第 n 个子元素的元素 | `p:nth-of-type(2)` |
| [:nth-last-of-type(n)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-of-type) | 选择作为其父元素的特定类型的倒数第 n 个子元素的元素 | `p:nth-last-of-type(2)` |
| [:only-child](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-child) | 选择作为其父元素的唯一子元素的元素 | `div:only-child` |
| [:only-of-type](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-of-type) | 选择作为其父元素的特定类型的唯一子元素的元素 | `p:only-of-type` |
| [:empty](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:empty) | 选择没有子元素的元素 | `div:empty` |
| [:not(selector)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not) | 选择不匹配指定选择器的元素 | `div:not(.special)` |
| [:is()](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:is) | 选择匹配选择器列表中任何一个选择器的元素 | `:is(header, main, footer) p` |
| [:where()](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:where) | 与 :is() 类似，但优先级为 0 | `:where(header, main, footer) p` |
| [:has()](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has) | 选择包含指定元素的元素 | `div:has(> img)` |
### 表单相关伪类
| 选择器 | 描述 | 示例 |
|-------|------|------|
| [:checked](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked) | 选择被选中的表单元素（如复选框） | `input:checked` |
| [:disabled](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:disabled) | 选择被禁用的表单元素 | `input:disabled` |
| [:enabled](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:enabled) | 选择已启用的表单元素 | `input:enabled` |
| [:valid](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:valid) | 选择验证通过的表单元素 | `input:valid` |
| [:invalid](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:invalid) | 选择验证未通过的表单元素 | `input:invalid` |
| [:required](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:required) | 选择必填的表单元素 | `input:required` |
| [:optional](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:optional) | 选择非必填的表单元素 | `input:optional` |
| [:in-range](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:in-range) | 选择值在指定范围内的表单元素 | `input:in-range` |
| [:out-of-range](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:out-of-range) | 选择值超出指定范围的表单元素 | `input:out-of-range` |
| [:read-only](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:read-only) | 选择只读的表单元素 | `input:read-only` |
| [:read-write](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:read-write) | 选择可读写的表单元素 | `input:read-write` |
| [:placeholder-shown](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:placeholder-shown) | 选择显示占位符文本的表单元素 | `input:placeholder-shown` |
| [:default](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:default) | 选择默认的表单元素 | `input:default` |
| [:focus-visible](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus-visible) | 选择通过键盘导航获得焦点的元素 | `button:focus-visible` |
| [:focus-within](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus-within) | 选择自身或其后代获得焦点的元素 | `form:focus-within` |
## 伪元素选择器
伪元素用于设置元素特定部分的样式。
| 选择器 | 描述 | 示例 |
|-------|------|------|
| [::before](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before) | 在元素内容之前插入内容 | `p::before` |
| [::after](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after) | 在元素内容之后插入内容 | `p::after` |
| [::first-line](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::first-line) | 选择元素的第一行 | `p::first-line` |
| [::first-letter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::first-letter) | 选择元素的第一个字母 | `p::first-letter` |
| [::selection](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::selection) | 选择用户选中的部分 | `p::selection` |
| [::placeholder](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder) | 选择表单元素的占位符文本 | `input::placeholder` |
| [::marker](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::marker) | 选择列表项的标记 | `li::marker` |
| [::backdrop](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::backdrop) | 选择全屏元素后面的背景 | `dialog::backdrop` |
## 选择器组合
| 组合方式 | 描述 | 示例 |
|---------|------|------|
| 分组选择器 | 将相同样式应用于多个选择器 | `h1, h2, h3 { color: blue; }` |
| 复合选择器 | 组合多个基本选择器，无空格 | `div.container` |
| 链式选择器 | 组合多个伪类 | `a:hover:not(.disabled)` |
## 使用示例
```css
/* 基本选择器示例 */
* { margin: 0; padding: 0; } /* 通配选择器 */
div { color: blue; } /* 类型选择器 */
.highlight { background-color: yellow; } /* 类选择器 */
#header { height: 80px; } /* ID 选择器 */
[type="text"] { border: 1px solid gray; } /* 属性选择器 */
[data-state="active"] { font-weight: bold; } /* 属性值选择器 */
[class~="box"] { padding: 10px; } /* 属性包含选择器 */
[href^="https"] { color: green; } /* 属性值开头选择器 */
[href$=".pdf"] { color: red; } /* 属性值结尾选择器 */
[title*="example"] { text-decoration: underline; } /* 属性值包含子串选择器 */
[lang|="en"] { font-style: italic; } /* 属性值连字符选择器 */
/* 关系选择器示例 */
article p { line-height: 1.6; } /* 后代选择器 */
section > p { margin-bottom: 1em; } /* 子组合器 */
h2 + p { font-weight: bold; } /* 相邻兄弟组合器 */
h2 ~ p { color: #666; } /* 后续兄弟选择器 */
/* 伪类选择器示例 */
a:link { color: blue; } /* 未访问的链接 */
a:visited { color: purple; } /* 已访问的链接 */
a:hover { text-decoration: underline; } /* 鼠标悬停 */
a:active { color: red; } /* 激活状态 */
li:first-child { font-weight: bold; } /* 第一个子元素 */
li:last-child { border-bottom: none; } /* 最后一个子元素 */
li:nth-child(odd) { background-color: #f9f9f9; } /* 奇数子元素 */
li:nth-child(even) { background-color: #e9e9e9; } /* 偶数子元素 */
p:first-of-type { font-size: 1.2em; } /* 第一个特定类型元素 */
div:empty { display: none; } /* 空元素 */
div:not(.exclude) { border: 1px solid #ddd; } /* 否定伪类 */
/* 表单相关伪类示例 */
input:focus { border-color: blue; } /* 获得焦点的输入框 */
input:disabled { background-color: #f5f5f5; } /* 禁用的输入框 */
input:checked + label { font-weight: bold; } /* 选中的复选框相邻的标签 */
input:valid { border-color: green; } /* 验证通过的输入框 */
input:invalid { border-color: red; } /* 验证未通过的输入框 */
input:required { border-left: 3px solid red; } /* 必填输入框 */
input:optional { border-left: 1px solid #ddd; } /* 非必填输入框 */
form:focus-within { background-color: #f0f8ff; } /* 包含焦点元素的表单 */
/* 伪元素选择器示例 */
p::first-letter { font-size: 2em; } /* 首字母 */
p::first-line { font-weight: bold; } /* 第一行 */
.quote::before { content: '"'; } /* 前置内容 */
.quote::after { content: '"'; } /* 后置内容 */
::selection { background-color: yellow; color: black; } /* 选中的文本 */
input::placeholder { color: #999; } /* 占位符文本 */
li::marker { color: red; } /* 列表标记 */
dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); } /* 对话框背景 */
/* 选择器组合示例 */
h1, h2, h3 { margin-top: 1em; } /* 分组选择器 */
div.container { max-width: 1200px; } /* 复合选择器 */
a.button:hover:not(.disabled) { background-color: #0056b3; } /* 链式选择器 */
:is(article, section, aside) h2 { color: #333; } /* :is() 选择器 */选择器优先级
CSS 选择器的优先级决定了当多个规则应用于同一元素时，哪个规则会生效。
优先级计算规则
优先级按以下方式计算（从高到低）：
- 内联样式：直接在 HTML 元素上使用
style属性 - ID 选择器：每个 ID 选择器贡献 100 点
- 类选择器、属性选择器和伪类：每个贡献 10 点
- 元素选择器和伪元素：每个贡献 1 点
- 通配选择器：0 点
优先级示例
/* 优先级: 1 (元素选择器) */
p { color: black; }
/* 优先级: 11 (1 个元素选择器 + 1 个类选择器) */
div.red { color: red; }
/* 优先级: 101 (1 个元素选择器 + 1 个 ID 选择器) */
p#special { color: blue; }
/* 优先级: 111 (1 个元素选择器 + 1 个类选择器 + 1 个 ID 选择器) */
div.highlight #title { color: green; }!important 声明
!important 规则会覆盖所有其他样式声明，包括内联样式。应谨慎使用。
p { color: red !important; } /* 这将覆盖任何其他针对 p 元素颜色的规则 */浏览器兼容性
大多数基本选择器在所有现代浏览器中都得到良好支持。但是，一些较新的选择器（如 :is()、:where()、:has()）可能在旧版浏览器中不受支持。
| 选择器 | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| 基本选择器 | 完全支持 | 完全支持 | 完全支持 | 完全支持 |
| 关系选择器 | 完全支持 | 完全支持 | 完全支持 | 完全支持 |
| :is() | 88+ | 78+ | 14+ | 88+ |
| :where() | 88+ | 78+ | 14+ | 88+ |
| :has() | 105+ | 121+ | 15.4+ | 105+ |
最佳实践
- 避免过度特定的选择器：过长的选择器链会降低性能并增加维护难度
- 优先使用类选择器：类选择器提供良好的特异性平衡
- 避免使用 ID 选择器：除非必要，因为它们的特异性太高
- 避免使用 !important：它会破坏样式的自然级联
- 使用有意义的类名：而不是依赖于元素结构
- 利用选择器组合：减少代码重复
- 考虑使用 :is() 和 :where()：简化复杂的选择器组
相关资源
- MDN CSS 选择器
- CSS 选择器规范
- CSS 选择器测试工具
- Can I Use - CSS 选择器支持
- CSS 选择器游戏 - 交互式学习 CSS 选择器