基础选择器
选择器定义规则适用于哪些元素。类型选择器按元素名匹配，类选择器按 class 匹配，ID 选择器按 id 匹配，通用选择器匹配更宽的集合。选择器写得越宽，越容易意外影响未来新增的内容。
css
p { line-height: 1.6; }
.warning { color: darkred; }
#toc { position: sticky; }
* { box-sizing: border-box; }类通常表达可复用的样式角色，ID 更适合文档身份、片段链接或脚本定位。* 不是“所有属性重置”的魔法；它只匹配元素，伪元素和继承属性还需要明确处理。多个类可以同时命中同一个元素，选择器匹配和层叠胜负是两个步骤。
变化一个条件观察匹配集合
把 .warning 改成 p.warning，匹配范围从所有警告元素缩小到段落警告。把 #toc 改成 .toc，允许多个目录实例，但也失去了 ID 的唯一性。选择器变复杂之前，先问需要表达的内容关系是什么。
实验与练习
创建三个段落、两个共享类和一个唯一 ID。使用开发者工具的 Matched CSS Rules 记录每个选择器实际匹配的元素数量，然后新增一个同类元素，观察哪条规则的影响范围发生变化。
可运行微实验：从匹配到胜出
在一个页面中保留三个同名元素，给它们同时设置类型、类、属性和伪类规则。先在 Elements 的 Matched CSS Rules 记录“命中但未胜出”的声明，再只改变一个条件：元素增加类、属性值改变、祖先增加类或规则移入另一层。每次只记录匹配集合、特异性/层级和最终 computed value，避免把“选择器没命中”和“命中了但被覆盖”混为一谈。
html
<p class="notice" data-state="error">消息</p>
<style>p { color: gray } .notice { color: navy } [data-state="error"] { color: crimson }</style>常见错误
- 用 ID 作为所有组件样式入口，导致复用和覆盖困难。
- 把类名当作唯一身份，依赖它进行精确文档定位。
- 认为选择器匹配后就一定生效，忽略层叠阶段。
- 用通用选择器覆盖第三方组件的所有内容。
继续阅读
单个元素关系还不够，下一篇用组合器表达父子、后代和兄弟关系：组合选择器。
练习
- 用最小输入复现“基础选择器”的成功路径，并记录可观察结果。
- 改变一个时序、数据或宿主条件，解释结果为何变化。
- 删除清理、校验或降级分支，写出能证明缺陷的断言。