CSS选择器需按匹配逻辑分层理解，核心是明确“选中范围”与“优先级来源”；应结合HTML结构选择元素、类、ID、属性、伪类等选择器，并区分后代、子代、兄弟关系。
CSS 选择器不是“背下来就行”，而是按**匹配逻辑分层理解**才不容易混淆。最常被新手卡住的，其实是搞不清「选中范围」和「优先级来源」——比如为什么 .btn 覆盖不了 button，为什么 div p 和 div > p 效果差很多。
看 HTML 结构就能判断该用哪种选择器
选择器本质是「描述你想要哪部分元素」的语句。别记名字，先盯住 HTML：
- 想改所有
<p>？→ 用p（元素选择器） - 只改带
class="error"的几个标签？→ 用.error（类选择器） - 页面只有一个顶部导航栏，且写了
id="header"？→ 用#header（ID 选择器） - 想只改
<form>里第一个<input type="text">？→ 用form input[type="text"]:first-of-type（属性 + 伪类组合）
后代、子代、兄弟——三个空格/符号决定选中范围
光写两个标签名不加符号，浏览器默认当「后代」；但实际你要的往往更精确：
-
nav a：选中<nav>里面**任意嵌套层级**的<a>（含子、孙、曾孙…） -
nav > a：只选<nav>的**直接子元素**<a>（中间不能隔其他标签） -
h2 + p：只选紧接在<h2>后面的**第一个同级<p>** -
h2 ~ p：选<h2>后面**所有同级<p>**（不限个数）
错用 > 或空格，经常导致样式“没生效”——其实不是没生效，是根本没选中目标元素。
立即学习“前端免费学习笔记（深入）”；
属性选择器不是“高级技巧”，而是日常刚需
很多新手以为属性选择器只用于表单，其实它解决的是「按行为/状态选元素」的问题：
-
a[href^="https://"]→ 给所有 HTTPS 链接加锁图标（^=表示“开头是”） -
img[src$=".webp"]→ 单独优化 WebP 图片加载逻辑（$=表示“结尾是”） -
[data-status="pending"]→ 服务端渲染时标记状态，前端直接响应（比 class 更语义化） -
button:disabled→ 按钮置灰态，不用额外加 class（伪类也是属性相关选择）
类选择器是唯一真正可复用、可组合、可维护的选择器
ID 不能复用，元素选择器太宽泛，通配符 * 是性能杀手——只有类选择器能同时满足：
- 一个元素可以有多个类：
<button class="btn btn--primary btn--large"> - 多个元素共用同一类：
<span class="sr-only">和<div class="sr-only">都隐藏屏幕阅读器外内容 - 支持 BEM 命名等工程化规范，团队协作不打架
真正该警惕的不是“用了太多 class”，而是用 ID 或标签选择器强行覆盖类样式——那说明结构设计已经失控了。
记住：选择器不是语法练习，是 DOM 定位指令。写之前先问自己一句：“我要找的，是哪个结构位置、具备什么特征、处于什么状态的元素？” 答案自然就指向具体选择器了。
