A02 选择器与层叠基础

摘要：同一个元素常被多条规则命中，最终生效的只有一条。决定权在三处：规则来自哪里、选择器权重多高、声明谁在后面。理解这三步之后，样式不生效与样式被覆盖两类问题都能在开发者工具中直接定位。本文用一张权重表与一段可复现的示例说明这套顺序。
关键词：选择器，权重，层叠，继承，组合器

所属：frontend/css / A-入门 ｜ 上一篇：A01-认识CSS与引入方式 ｜ 下一篇：A03-颜色与文字排版

1 引言

写 CSS 的前两周，多数时间消耗在「为什么没生效」上。原因通常不在语法，而在多条规则争同一个属性。

本文给出选择器清单与权重计算顺序，并用一段可运行代码验证。范围见表 1-1。

项	本文覆盖	本文不覆盖
选择器	类型、类、ID、属性、伪类、组合器	关系型伪类（B04）
权重	权重三元组与比较顺序	@layer 分层（C05）
层叠	来源、权重、书写顺序三级比较	继承与初始值细节（B01）

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/selector.html	编码 UTF-8
浏览器	Chrome 130+，Styles 面板可用	能看到被划掉的声明
前置	A01	会用外部样式表

3 原理与实现

3.1 三条规则争一个属性

层叠依次比较来源、权重与顺序，任一级分出胜负即停止，如图 3-1 所示。

flowchart TD
    A["多条规则命中同一属性"] --> B{"来源相同"}
    B -->|"否"| C["用户代理 < 作者 < 行内"]
    B -->|"是"| D{"权重相同"}
    D -->|"否"| E["权重高者胜"]
    D -->|"是"| F["顺序靠后者胜"]
    C --> G["得到最终值"]
    E --> G
    F --> G

图 3-1 层叠的三级比较

图上可见：顺序只在来源与权重都相同时才起作用；这也是「后写的样式覆盖前面」在部分场景下失效的原因。

3.2 可复现的权重示例

<!-- 运行环境：Chrome 130+；css-practice/selector.html -->
<article id="post" class="post">
  <h2 class="title">标题</h2>
  <p class="intro" data-kind="lead">导语文字。</p>
</article>

/* 权重从低到高书写，最后一条胜出 */
.post .intro       { color: #64748b; }  /* 0,2,0 */
article p          { color: #0f172a; }  /* 0,0,2 */
p.intro[data-kind] { color: #1d4ed8; }  /* 0,3,1 */

选择器与权重见表 3-1。

选择器	示例	权重	说明
通配符	*	0,0,0	常用于重置
类型	p	0,0,1	按标签名
类	.intro	0,1,0	最常用
属性	[data-kind]	0,1,0	与类同级
伪类	:hover	0,1,0	与类同级
ID	#post	1,0,0	优先级过高，布局避免使用
后代组合	.post .intro	相加	空格，命中所有后代
子代组合	.post > .intro	相加	> 只命中直接子元素
相邻兄弟	h2 + p	相加	命中紧邻的下一个兄弟
通用兄弟	h2 ~ p	相加	命中之后所有兄弟

三条规则：布局只用类选择器，不用 ID；!important 只在覆盖第三方样式时使用，并附注释说明原因；选择器嵌套不超过三层，超过说明结构可以简化。

4 验证与讨论

1. 打开页面，导语文字应为蓝色（第三条规则胜出）。
2. 在元素面板选中 p，查看 Styles 面板中被划掉的两条声明及其权重。
3. 删除第一条规则，颜色仍为蓝色；删除第三条后变为深灰，验证权重顺序。
4. 给 p 加行内样式 style="color: green"，确认行内样式仍能覆盖类选择器。

检查项	预期结果	说明
权重比较	0,3,1 覆盖 0,2,0	类与属性相加
面板定位	被覆盖声明显示删除线	便于排查
行内覆盖	行内样式最终生效	来源优先级更高
同级顺序	后写规则覆盖前写规则	权重相同时比较顺序

讨论与局限。 权重是四段比较，现代规范中还有一个「层」的位置，用于把外部库降到低优先级。另类选择器写得越多，后续覆盖成本越高，组件化时优先用一个类表达完整样式。

5 常见问题

现象	原因	处理
类选择器不生效	类名大小写或拼写不一致	元素面板复制实际类名
加 !important 仍未覆盖	对方也用了 !important 且权重更高	提高选择器权重，或改用层
后代选择器命中过多	空格写法命中所有后代	改用 > 限定直接子元素
ID 样式难以覆盖	ID 权重过高	布局改用类，ID 只作锚点
样式在某些页面有效、某页无效	该页没有引用样式表	检查 link

6 结论

序号	结论	依据
1	层叠按来源 → 权重 → 顺序比较	图 3-1
2	类选择器是布局的主力	表 3-1
3	ID 权重过高，仅用于锚点	表 3-1
4	面板中的删除线直接指出覆盖来源	4 节步骤 2

• 上一篇：A01-认识CSS与引入方式
• 下一篇：A03-颜色与文字排版
• 返回：A00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · CSS 选择器，https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_selectors（访问于 2026-10-31）
[2] CSS Cascading and Inheritance Level 5 · Cascading，W3C，https://www.w3.org/TR/css-cascade-5/#cascade-sort（访问于 2026-10-31）