css属性计算过程

一、确定声明值

p{
  color: red;
}

上面我们给p元素设置了红色字体颜色，选中样式可以看到生效的样式包含了我们设置的color和浏览器的用户代理样式。

由于我们设置的color属性和浏览器用户代理样式没有冲突，所以最终的字体颜色样式就是我们设置的color属性。

二、CSS层叠 Cascading

CSS的来源有:

• 浏览器的用户代理样式(user agent stylesheet): 浏览器的默认样式
• 用户的自定义样式(user style sheet): 用户样式用于覆盖浏览器的默认样式
• 网页作者的样式(Author style sheet): 网页作者样式，<style>标签、<link>标签引入的外部样式、行内样式。

CSS层叠是指元素的样式可能有多个来源，这些样式可能来自于不同的源、不同的样式表、不同的选择器等， 当一个元素有多个样式的时候，就需要有一套规则来确定最终生效的样式。

2.1 层叠规则

1. 先比较样式来源，优先级 网页作者样式 > 用户样式 > 用户代理样式。

2. 如果来源相同则比较选择器的权重， 权重高的样式会覆盖权重低的样式。

3. 如果权重相同则比较样式表的顺序， 下面的样式表会覆盖上面的样式表。

<style>
  body {
    color: red;
  }
  body{
    color: green;
  }
</style>

4. 继承样式 继承的是距离当前元素最近的父元素的样式

  <style>
    .continer {
      color: red;
    }

    div {
      color: blue;
    }
  </style>
  
  <div class="continer">
    <div>
      <p>文字</p>
    </div>
  </div>

上面的例子中p元素的颜色就是blue，因为p元素继承的是距离它最近的父元素的样式。

5. 使用默认值 如果到这一步样式还没有确定下来就会使用默认值。有很多的属性我们不会去设置，浏览器的用户代理样式表也不会去设置，这些属性使用的都是默认值。在chorme的样式计算中，勾选全部显示可以看到所有的样式，这些样式都是使用的默认值。

三、 !important

!important 会覆盖所有的样式, 包括不同来源的样式、相同来源的不同选择器的样式。