CSS 层叠、继承与源顺序

串起 CSS 的层叠、继承、优先级和源顺序，回答为什么最终样式会是这样。

#type / concept #status / growing #resource / css #tech / dev / frontend

[!info] related notes

所属 MOC: CSS MOC

并列概念: 样式优先级和特异性

上位主题: CSS

很多 CSS 冲突问题，不是因为属性不会写，而是没搞清楚浏览器到底按什么规则决定最终样式。

一句话主线

多个规则同时命中同一个元素时，浏览器会综合看来源、优先级、继承关系和书写顺序，最终得出实际样式。

层叠就是：

当多条样式规则都命中同一个元素时，浏览器要决定最后采用哪一个值。

这也是 CSS 里 Cascading 的来源。

有些属性会从父元素传给子元素，最典型的是文字相关属性。

常见会继承的属性：

常见不会继承的属性：

如果两个规则优先级完全一样，那么后写的会覆盖先写的。

.title {
  color: blue;
}

.title {
  color: red;
}

最终通常会是红色。

优先级负责回答“谁更具体”，源顺序负责回答“同样具体时谁更后面”。

所以排查顺序通常是：

层叠回答“谁赢”，继承回答“哪些属性会往下传”，源顺序回答“同级时谁覆盖谁”。