CSS 基础与层叠：选择器、优先级和 DevTools 排错

CSS 规则由选择器和声明块组成：选择器匹配元素，声明由属性和值构成。浏览器会先判断规则是否适用于当前元素，再经过层叠算法为每个属性选出一个值。理解这条路径，比不断加长选择器或追加 !important 更能解决真实项目中的样式冲突。

从最小规则开始

.notice {
  color: #17324d;
  padding: 1rem;
}

.notice[aria-invalid="true"] {
  border-color: #b42318;
}

类选择器适合表达可复用的组件状态；属性选择器适合与语义状态连接；元素选择器适合全局基础样式。组合器描述 DOM 关系，伪类表达状态，伪元素表达生成内容或部件。避免把页面深层 DOM 路径写进选择器，这会让组件难以移动和覆盖。

CSS 属性并非都会继承。颜色和字体等常继承，盒模型、边框和定位通常不继承。inherit、initial、unset、revert 和 revert-layer 表达不同回退语义，不能互换。自定义属性通常参与继承，组件作用域要防止变量意外泄漏。

层叠顺序不是“谁写在最后”

先筛掉不匹配选择器、无效语法和当前媒体条件不适用的规则；随后比较来源与重要性、级联层、选择器优先级、@scope 接近度，最后才看源码顺序。优先级只在前面的层级相同后才参与比较。

普通声明中，作者样式通常胜过浏览器默认样式；同一作者来源中，未分层普通规则胜过分层普通规则，后声明的层胜过先声明的层。!important 会反转层的优先次序；用户或浏览器的重要声明也可能胜过作者的重要声明。动画值高于普通声明，而正在过渡的属性可以暂时高于重要声明。

内联 style 的普通声明通常胜过样式表中的普通作者声明，但“内联永远最大”是错误心智模型：重要来源、重要性、级联层和 transition 都会影响结果。行内重要声明也不是无条件压过用户或浏览器的重要样式。

@layer reset, components, overrides;

@layer components {
  .button {
    color: navy;
  }
}

/* 普通未分层声明胜过普通分层声明。 */
.button {
  color: teal;
}

权重常用记法把 ID、类/属性/伪类、元素/伪元素分列比较；通用选择器、组合器和 :where() 本身不增加权重。:is()、:not()、:has() 的权重由参数决定。不要把它简化成可任意进位的十进制数字，也不要在来源或层级不同的时候直接比权重。

用 DevTools 逐层定位

1. 确认目标节点和实际匹配的 class、属性、伪类状态。
2. 在 Computed 面板查最终计算值，再展开胜出规则。
3. 看被划线声明的来源文件、行号、媒体条件和层；确认它是被覆盖还是根本未匹配。
4. 检查语法、元素适用性、未定义变量和继承值。
5. 检查构建产物、资源加载状态与缓存；开发环境生效而线上失效时，不要只在源码里找原因。

优先修正设计系统的层顺序或组件边界，而不是堆叠高权重选择器。谨慎扩大 !important，否则主题、无障碍覆盖和组件状态都会更难维护。验收至少检查媒体条件、hover/focus、禁用状态、不同主题和生产构建产物。

参考：MDN CSS 入门、MDN 层叠介绍、MDN specificity、MDN @layer。