属性的计算过程

属性的计算过程，就是一个元素从无属性值到所有的CSS属性都有值的过程。

1.确定声明值

声明值存在两种：

• 作者样式表：作者写的CSS
• 浏览器默认样式表：浏览器中内置了一些样式表

对于存在冲突的样式，作者样式表将会覆盖浏览器的默认样式表

2.层叠冲突

参考样式表中没有冲突的声明作为CSS属性值

.red{
  color:red;
  font-size:40px
}
h1{
  font-size:20px
}

• 作者样式表中的样式存在冲突，则比较选择器的权重进行层叠

• 对于相同的选择器，靠后的样式将覆盖靠前的样式

3.使用继承

对仍然没有值的属性，若可以继承，则继承父元素的值

4.使用默认值

对仍然没有值的属性，使用默认值

实例

以p的color和a的color举例说明属性值的计算工程

html

    <div class="box">
      <a href="">点击链接</a>
      <p>段落继承</p>
    </div>

css

      .box {
        color: red;
      }

a元素

1. 确定声明值，检测到浏览器默认样式表，并且无作者样式表，因此a标签不会继承变红

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

我们可以在作者样式表中让color继承的过程提前

a{
  color: inherit;
  text-decoration: none;
}

p元素

1. 确定声明值：没有获取到p元素color

2. 没有发现层叠样式表的冲突

3. 使用继承：检查到color还是没有值，则使用继承，从.box中获取到了color的值