CSS 选择器是 CSS 的核心基础，作用是精准选中页面中的 HTML 元素，并为选中的元素设置样式。简单来说，就是告诉浏览器：要给哪些标签、什么状态的标签添加样式。

所有 CSS 样式生效的前提，都是通过选择器匹配到对应 DOM 元素，学好选择器可以精准控制页面样式，避免样式冲突、冗余代码，是前端布局、样式开发的必备基础。

二、CSS 选择器核心分类

CSS 选择器整体分为四大类，覆盖日常开发 99% 场景：基础选择器、组合选择器、属性选择器、伪类 & 伪元素选择器，从简单到复杂层层递进，适配不同元素匹配需求。

三、基础选择器（入门必学）

基础选择器是最常用、最简单的选择器，包含通配符、标签、类、ID 四种，是所有选择器的基础。

3.1 通配符选择器（*）

匹配页面所有 HTML 元素，一般用于页面初始化样式重置，清除默认边距、内边距。

/* 选中页面所有标签 */ * { margin: 0; padding: 0; box-sizing: border-box; }

3.2 标签选择器（元素选择器）

根据 HTML 标签名称匹配元素，统一页面同类标签的默认样式，会作用于页面所有同名标签。

/* 选中所有 p 标签 */ p { font-size: 14px; color: #333; } /* 选中所有 div 标签 */ div { margin: 10px 0; }

3.3 类选择器（.class）【开发最常用】

通过标签的 class 属性匹配元素，灵活度最高、可复用、可多个叠加，是日常开发首选选择器。

特点：一个类可以给多个标签使用，一个标签可以绑定多个类。

/* 选中所有类名为 box 的元素 */ .box { width: 100px; height: 100px; background: pink; }

3.4 ID 选择器（#id）

通过标签的 id 属性匹配元素，id 页面唯一不可重复，一般用于 JS 获取元素，不推荐大量用于 CSS 样式，优先级过高不易覆盖。

/* 选中 id 为 banner 的元素 */ #banner { width: 100%; height: 200px; }

基础选择器优先级排序

ID 选择器 > 类选择器 > 标签选择器 > 通配符选择器

四、组合选择器（精准匹配）

组合选择器可以根据元素的嵌套关系、兄弟关系精准匹配元素，解决单一选择器匹配范围过广的问题，样式精准不污染。

4.1 后代选择器（空格）

匹配父元素内部所有子孙元素（子、孙、重孙），范围覆盖所有嵌套层级。

/* 选中 box 内部所有 p 标签 */ .box p { color: red; }

4.2 子代选择器（>）

仅匹配父元素的直接子元素，不包含孙子及更深层级元素，匹配更精准，推荐优先使用。

/* 选中 box 的直接子级 p 标签 */ .box > p { color: green; }

4.3 相邻兄弟选择器（+）

匹配紧跟在指定元素后方的第一个同级兄弟元素，仅匹配相邻一个元素。

/* 选中 h2 后面紧邻的第一个 p 标签 */ h2 + p { font-weight: bold; }

4.4 通用兄弟选择器（~）

匹配指定元素后方所有同级兄弟元素，只要同级、在后方即可匹配。

/* 选中 h2 后方所有同级 p 标签 */ h2 ~ p { line-height: 1.8; }

五、属性选择器（高阶精准匹配）

根据 HTML 标签的属性、属性值匹配元素，无需依赖 class、id，适合匹配特定属性的标签，适配表单、自定义属性场景。

/* 匹配所有 type 为 text 的输入框 */ input[type="text"] { border: 1px solid #ccc; } /* 匹配所有 class 包含 btn 的元素 / [class="btn"] { padding: 6px 12px; }

六、伪类选择器（状态交互）

伪类选择器用于匹配元素不同状态、特殊位置，实现交互效果、差异化样式，无需修改 HTML 结构。

6.1 常用交互伪类

6.2 结构伪类（位置匹配）

根据元素排列顺序匹配，快速选中第 N 个元素，简化代码。

/* 选中第一个子元素 */ li:first-child { color: blue; } /* 选中最后一个子元素 */ li:last-child { color: orange; } /* 选中第 3 个子元素 */ li:nth-child(3) { color: purple; } /* 选中奇数行元素 */ li:nth-child(odd) { background: #f5f5f5; }

七、伪元素选择器（创建虚拟元素）

伪元素可以在元素前后创建虚拟行内元素，无需新增 HTML 标签，常用于制作图标、分割线、遮罩、文字装饰，节省 DOM 结构。

核心特点：必须配合 content 属性使用，默认行内元素。

/* 元素前置内容 */ .box::before { content: "前缀："; color: red; } /* 元素后置内容 */ .box::after { content: ""; display: block; width: 100%; height: 2px; background: #eee; }

八、选择器核心开发总结

1. 日常开发首选类选择器：复用性强、优先级适中、便于维护，避免滥用 ID 和通配符。

2. 精准匹配优先子代选择器：相比后代选择器，不会误伤深层元素，样式隔离性更好。

3. 交互效果用伪类：hover、focus 等伪类实现无 JS 简单交互，精简代码。

4. 装饰效果用伪元素：无需新增标签，优化 DOM 结构，让结构与样式分离。

5. 属性选择器适配特殊场景：表单、自定义属性元素匹配场景下效率极高。