一、核心说明
CSS 选择器的核心作用是 精准选中 HTML 中的目标元素，为其设置样式 ，优先级从高到低大致为：ID 选择器 > 类选择器 > 属性选择器 > 元素选择器 > 通配符选择器，后续每个类型会标注优先级相关信息。
二、常用选择器分类总结
1. 基础选择器（最常用、最核心）
基础选择器是 CSS 最基础的组成，也是其他复杂选择器的基础。
| 选择器类型 | 语法 | 作用 | 示例 & 效果 |
|---|---|---|---|
| 通配符选择器 | * |
选中页面中所有元素（包括根元素） | css * { margin: 0; padding: 0; } 清除所有元素的默认边距（常用初始化） |
| 元素选择器 | 标签名 |
选中页面中所有该标签的元素 | css div { font-size: 14px; } 选中所有 <div> 元素，设置字体大小 |
| 类选择器 | .类名 |
选中所有带有该 class 属性的元素 | css .box { width: 100px; height: 100px; } 选中所有 class="box" 的元素 |
| ID 选择器 | #ID名 |
选中页面中唯一对应 ID的元素（ID 唯一） | css #root { margin: 20px auto; } 选中 id="root" 的元素（Vue 挂载根元素常用） |
注意：
- 类选择器可重复使用（一个元素可多个类，多个元素可一个类），ID 选择器只能唯一对应一个元素；
- 优先级：
#ID > .类 > 元素 > *
2. 属性选择器
通过元素的「属性名」或「属性值」选中元素，适合框架自定义属性、表单元素等场景。
| 选择器语法 | 作用 | 示例 & 效果 |
|---|---|---|
[attr] |
选中所有带有 attr 属性的元素 | css [v-cloak] { display: none; } 选中所有带 v-cloak 属性的元素（解决插值闪烁） |
[attr="value"] |
选中 attr 属性值完全等于 value 的元素 | css input[type="file"] { cursor: pointer; } 选中所有 type="file" 的输入框 |
[attr*="value"] |
选中 attr 属性值包含 value 子串的元素 | css img[src*="img"] { border: 1px solid #eee; } 选中图片路径包含 img 的图片 |
[attr^="value"] |
选中 attr 属性值以 value 开头的元素 | css a[href^="https://"] { color: #ff4949; } 选中所有外部链接（以 https:// 开头） |
[attr$="value"] |
选中 attr 属性值以 value 结尾的元素 | css img[src$=".png"] { width: 100px; } 选中所有后缀为 .png 的图片 |
优先级：和类选择器同级（权重相同），多个属性选择器可叠加提升优先级。
3. 组合选择器（用于选中「关联元素」）
通过组合多个基础选择器，选中具有特定关系的元素（如父子、兄弟）。
| 选择器语法 | 关系描述 | 示例 & 效果 |
|---|---|---|
选择器1 选择器2 |
后代选择器：选中选择器 1 的所有后代（子、孙、曾孙等） | css #root .box { background: pink; } 选中 #root 内所有 class="box" 的元素 |
选择器1 > 选择器2 |
子选择器：选中选择器 1 的直接子元素（仅儿子，不含孙子） | css .demo > div { border: 1px solid #ccc; } 选中 .demo 直接包含的 <div>（孙子 <div> 不选中） |
选择器1 + 选择器2 |
相邻兄弟选择器：选中选择器 1后面紧邻的一个兄弟元素 | css h2 + p { margin-top: 10px; } 选中 <h2> 后面紧邻的第一个 <p> 元素 |
选择器1 ~ 选择器2 |
通用兄弟选择器：选中选择器 1后面所有的兄弟元素 | css h2 ~ p { color: #666; } 选中 <h2> 后面所有的 <p> 元素（不限紧邻） |
4. 伪类选择器（用于元素的「特殊状态 / 位置」）
伪类以 : 开头，用于选中元素的特定状态 （如 hover、选中）或特定位置（如第一个子元素），不修改 HTML 结构即可实现动态样式。
（1）常用「状态伪类」（表单 / 交互常用）
| 选择器语法 | 作用 | 示例 & 效果 |
|---|---|---|
:hover |
选中元素鼠标悬浮时的状态 | css button:hover { background: #409eff; color: #fff; } 按钮悬浮时变蓝 |
:active |
选中元素被点击激活时的状态 | css button:active { background: #337ecc; } 按钮点击时加深蓝色 |
:focus |
选中元素获取焦点时的状态（如输入框） | css input:focus { border-color: #409eff; outline: none; } 输入框聚焦时变蓝边框 |
:checked |
选中表单元素被选中时的状态（复选框 / 单选框） | css input[type="checkbox"]:checked { accent-color: #409eff; } 复选框选中时变蓝 |
（2）常用「位置伪类」（列表 / 布局常用）
| 选择器语法 | 作用 | 示例 & 效果 |
|---|---|---|
:first-child |
选中父元素下的第一个子元素 | css ul > li:first-child { color: #ff4949; } 列表第一个 li 变红 |
:last-child |
选中父元素下的最后一个子元素 | css ul > li:last-child { border-bottom: none; } 列表最后一个 li 去掉下边框 |
:nth-child(n) |
选中父元素下的第 n 个子元素（n 可填数字 /odd/even） | css ul > li:nth-child(even) { background: #f8f8f8; } 列表偶数行变浅灰（隔行变色） |
优先级：和类选择器同级（权重相同）。
5. 伪元素选择器（用于创建「虚拟元素」）
伪元素以 :: 开头（CSS3 规范，旧版可写 :），用于创建不在 HTML 结构中的虚拟元素，常用于添加装饰性内容、清除浮动等。
| 选择器语法 | 作用 | 示例 & 效果 |
|---|---|---|
::before |
在元素内部前面 创建虚拟元素（需配合 content 属性） |
css .title::before { content: ""; display: inline-block; width: 4px; height: 16px; background: #409eff; } 标题前添加蓝色小竖线 |
::after |
在元素内部后面 创建虚拟元素（需配合 content 属性） |
css .clearfix::after { content: ""; display: block; clear: both; } 清除浮动（经典 clearfix 方案） |
::text |
选中元素内的所有文本内容 | css h2::text { color: #333; } 设置 h2 文本颜色（兼容性一般） |
注意：
- 伪元素必须配合
content属性（即使值为空""），否则无法显示；- 伪元素创建的是虚拟元素，无法通过 JS 获取和操作。
三、选择器优先级快速记忆
- 权重排序（从高到低） ：
!important（最高，不推荐滥用）>#ID 选择器>.类选择器/属性选择器/伪类选择器>元素选择器/伪元素选择器>* 通配符选择器； - 叠加规则 ：多个选择器组合时，权重叠加（如
#root .box input= ID 权重 + 类权重 + 元素权重）； - 就近原则：权重相同时，后定义的样式会覆盖先定义的样式。
四、总结
- 基础选择器（类、ID、元素）是日常开发的「主力军」，优先使用类选择器（可复用性强）；
- 属性选择器适合处理框架自定义属性（如
[v-cloak]）、表单元素、文件路径匹配； - 组合选择器用于精准选中关联元素（如后代、子元素），简化 HTML 类名定义；
- 伪类 / 伪元素用于处理「特殊状态 / 虚拟元素」，无需修改 HTML 结构，提升开发效率；
- 优先级记忆核心：
ID > 类 > 元素，权重相同时就近覆盖。