浏览器中属性值的计算过程

属性值的计算过程

上一篇博客简单的介绍浏览器渲染页面的过程，这次主要介绍一下浏览器中属性值的计算过程。
一个元素的所有属性值，从没有值到有值，这个计算过程叫做属性值的计算过程。

1.确定声明

首先将样式表中没有冲突的声明，作为CSS属性值。
当自己书写的CSS样式与浏览器写的样式没有冲突时，那么自己写的CSS样式就会被浏览器给渲染出来显示。

 <style>
        a{
            background-color: red;
        }
    </style>

2.层叠冲突

对样式表中有冲突声明使用CSS层叠规则，来确定CSS的属性值。

 <style>
        a{
            background-color: red;
            color: green;
        }
    </style>

当自己书写的CSS样式与浏览器写的样式冲突时，会优先使用自己的样式。同样的道理，当自己同时对一个元素写了多个样式，那么会计算特殊性，来确定选择的样式。如：

<style>
        a{
            color: green;
        }
        .test{
            color: red;
        }
    </style>

在F12中可以清晰的看到最终浏览器选择的样式是类选择器的，具体的缘由可去看一下这篇博客（CSS选择器优先级）。

3.使用继承

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

<style>
       div{
           color: red;
       }
    </style>

当书写样式时，没有对p标签的字体颜色进行限定时，那么p标签里的文字会继承父元素div里设置的字体颜色。

4.使用默认值

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

当自己书写所有样式都没有对a标签的字体颜色进行限定时，那么浏览器会采用自带a标签的字体颜色的样式。