层叠与继承

样式来源

1. 使用不同的选择器设置的样式
2. 浏览器默认样式 (user agent stylesheet)
3. 继承的样式 (Inherited from xxx)

层叠

!important

<div class="success no-background-color" id="box">
  你好，饥人谷
</div>

#box {
  background-color: blue;
}
 
.success {
  background-color: green;
}
 
.no-background-color {
  background-color: transparent !important; 
}

Specificity 特异性

注意 通用选择器(*), 组合选择器 (+, >, ~, ' ') 和 (:not) 对特异性没有影响。

🌰

代码顺序

如果特异性相同或都是 !important，那后声明规则会被应用。

继承

• 会继承 - color font-size 等
• 不继承 - padding margin border background-image 等

控制继承

• inherit 继承

  .item {
    width: inherit;
    height: inherit;
    position: absolute;
  }

• initial 初始值（浏览器默认样式）
• https://developer.mozilla.org/en-US/docs/Web/CSS/unset

问题：下图所示的代码和效果中，为什么 h1 的字体大小没变化? 为什么 a 的颜色没变化?

参考链接

• https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritanc e