一、CSS 选择器是什么
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，适合匹配特定属性的标签，适配表单、自定义属性场景。
选择器语法 | 匹配效果 |
|---|---|
[attr] | 匹配拥有 attr 属性的所有元素 |
[attr="value"] | 匹配 attr 属性值等于 value 的元素（精准匹配） |
[attr^="value"] | 匹配 attr 属性值以 value 开头的元素 |
[attr$="value"] | 匹配 attr 属性值以 value 结尾的元素 |
[attr*="value"] | 匹配 attr 属性值包含 value的任意元素 |
/* 匹配所有 type 为 text 的输入框 */ input[type="text"] { border: 1px solid #ccc; } /* 匹配所有 class 包含 btn 的元素 / [class="btn"] { padding: 6px 12px; }六、伪类选择器（状态交互）
伪类选择器用于匹配元素不同状态、特殊位置，实现交互效果、差异化样式，无需修改 HTML 结构。
6.1 常用交互伪类
属性值 | 效果 |
|---|---|
:link | 未访问的链接状态 |
:visited | 已访问的链接状态 |
:hover | 鼠标悬浮元素上的状态（最常用） |
:active | 鼠标点击按下的瞬间状态 |
:focus | 表单元素获取焦点状态 |
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; }八、选择器核心开发总结
日常开发首选类选择器：复用性强、优先级适中、便于维护，避免滥用 ID 和通配符。
精准匹配优先子代选择器：相比后代选择器，不会误伤深层元素，样式隔离性更好。
交互效果用伪类：hover、focus 等伪类实现无 JS 简单交互，精简代码。
装饰效果用伪元素：无需新增标签，优化 DOM 结构，让结构与样式分离。
属性选择器适配特殊场景：表单、自定义属性元素匹配场景下效率极高。