【CSS】属性值计算过程，计算权重详细操作

属性值的计算过程

本文章自己学习整理使用，可能会有错误欢迎指正，转载请标明出处

问题抛出

当平常开发时，会遇到如下问题

<style>
    .container{
        color: red;
    }
</style>
<div class='container'>
    <a href = '#'>百度</a>
    <p>一个段落</p>
</div>

按照正常思维a元素的样式应该会继承父盒子container的颜色样式，但实际上只有p元素继承了红色，而a元素却还是浏览器的样式，这是为什么呢？

事实上对上面代码进行简单的修改就能实现正确的效果，如下：

<style>
    .container{
        color: red !important;
    }
    .container a{
        color: red;
    }
</style>
<div class='container'>
    <a href = '#'>百度</a>
    <p>一个段落</p>
</div>

通过对.container元素里面的a元素进行设置样式，能实现正确的效果，这并不是权重的问题，因为用 !important 也没有用，况且这也无法解释上面所说的继承”失效“的问题。

除此之外还有类似的其他问题，我们都见过下面的代码：

body{
	display: block;
	margin: 8px;	
}
*{
    margin: 0;
    padding: 0;
}

其中body是浏览器自带的元素样式，我们设置的全局选择器权重是0，而body的标签选择器权重是1,为什么会被我们书写的选择器覆盖呢？margin； 8px;

---

问题原因

在html中，每个元素都有很多很多的CSS样式，可以通过控制台的computed查看，只有这些所有的属性都有值才能显示出正确的样式（尽管你没有设置，系统也会分配默认值），从每一个属性都没有值到所有属性都有值的过程，就是属性值计算过程。

属性值计算过程要按照下面的四个阶段依次来进行：

1. 确定声明值
2. 层叠冲突
3. 使用继承
4. 使用默认值

每一个元素都要按照这个方式进行计算，最终结果在控制台中的computed查看，值得注意的是，computed里面查到的是元素的最终值，例如虽然你的样式是100%，但是呈现的是实际的px值，称为绝对单位。

现在分别来看每一步骤

1.确定声明值

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

用一下的例子进行说明：

这是html代码：

<h1 class = "red">
    Lorem
</h1>

这是作者样式表代码 (即我们打出来的代码)：

.red{
    color: red;
    font-size: 40px;
}
h1{
    font-size: 20px;
}
div h1 .red{
    font-size: 2em;
    font-size: 30px;
}

这是浏览器默认样式表 (即浏览器自带的样式)：

h1{
    display: block;
    font-size: 2em;
    font-weight: bold;
}

所以按照第一步，找出所有没有冲突的属性（即只出现过一回），不难看出有color,display,font-weight三个属性，现在他们三个属性的值为computed最终属性值。

2.层叠冲突

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

第一步我们可以看到仅仅解决了没有冲突的元素是不够的，里面的font-size元素并没有解决，所以需要进行第二步来解决层叠冲突问题，又分为以下三步：

1. 比较重要性

意思就是，作者样式表覆盖浏览器默认样式表

2. 比较特殊性

这里比较的是选择器的权重

3. 比较源次序

意思就是，靠后的代码覆盖靠前的代码

知道这些知识点就可以对上述的例子进行冲突分析了，冲突的样式是font-size;

第一步：比较重要性，浏览器默认样式表中的h1的 font-size被覆盖。

第二步：比较特殊性，根据权重计算得出div h1.red权重最大，其余选择器被覆盖。

第三步：比较源次序，可以看出还有两个 font-size属性值，那么后面的覆盖前面的。

经过上述计算，最终得出属性值为font-size: 30px;

3.使用继承

对仍然没有值的属性，若可以继承，则继承父元素的值。一般关于字体的样式都可以继承，display不能继承。

4.使用默认值

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

至此所有属性皆有值，可以在浏览器中显示出来。

---

问题解决

现在可以解释最开始的问题了

<style>
    .container{
        color: red;
    }
</style>
<div class='container'>
    <a href = '#'>百度</a>
    <p>一个段落</p>
</div>

为什么p元素是红色的？

第一步：确定声明值，可以看到整个页面没有任何直接设置p颜色的样式，进行下一步。

第二部：层叠冲突：没有设置颜色更不要说冲突了。进行下一步；

第三步：使用继承，父元素container为红色，所以继承为红色。

第四步：设置默认值，已经没有还没有值的属性了。

为什么a元素没有变化成红色？

第一步：确定声明值，可以看到浏览器中有默认的a元素样式颜色，此为最终值，不进行下一步。

没有下一步也就没有第三步的继承，所以不会变成红色。

很明显，a元素不可继承的特点很烦人，为了解决这个问题，可以在CSS里使用如下代码：

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

现在的第一步，确定声明值时，既有浏览器的颜色样式，还有我们的inherit样式，第一步解决不了冲突值，进行下一步。

第二步，解决冲突值，作者样式表覆盖浏览器默认样式表，此时确定了颜色为inherit，进行强制继承颜色，为红色。

第三步第四步还是要有，只不过和颜色无关了，颜色已经确认为红色。