层叠与继承

样式来源

  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 特异性

分数 条件
1000 + 1 / 在 style 属性内或在 <style>标签内
100 + 1 / 每个出现的 ID 选择器
10 + 1 / 每个出现的 类,伪类或 属性选择器
1 + 1 / 每个元素选择器或伪元素

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

🌰

选择器 1000 100 10 1 总分
body 0 0 0 1 1
#flash 0 1 0 0 100
h1 + p::after 0 0 0 3 3
li > a[download] > .warning 0 0 2 2 22
#notice a:hover<style> 1 1 1 1 1111

代码顺序

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

继承

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

控制继承

  • inherit 继承

    .item {
      width: inherit;
      height: inherit;
      position: absolute;
    }
    
  • initial 初始值(浏览器默认样式)
  • unset

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

参考链接

results matching ""

    No results matching ""