选择器
定义CSS 中匹配 HTML 元素的模式，决定样式规则应用到哪些元素上
选择器是 CSS 的「寻址系统」，从标签、class、id 到属性、伪类、伪元素、组合关系，构成一条精度递增的谱系：div（标签）→ .card（类）→ #app（id）→ input[type="text"]（属性）→ a:hover（伪类）→ p::first-line（伪元素）。
组合选择器用关系词表达 DOM 结构：A B（后代）、A > B（子代）、A + B（相邻兄弟）、A ~ B（后续兄弟），精准打击目标元素。
- 优先用 class，慎用 id（权重太高难覆盖），杜绝 !important；
- 选择器越短越快，避免 .a .b .c .d 深层嵌套；
- :is() / :where() 可以简化复杂选择器，前者带权重后者不带。
CSS
/* 一个现代选择器组合 */ .card > h2:first-child { color: #333; } .nav a:is(:hover, :focus-visible) { color: blue; } :where(input, select):focus { outline: 2px solid; }
⚠ 常见误区
- 优先级相同时后写的赢，但依赖源码顺序是脆弱设计
- 避免用标签选择器改组件样式（会误伤全局）
- 通配符 * 只用于 reset，不要出现在业务规则里