CSS样式计算

news2025/1/21 0:57:24

在网页中，每个 元素都有着许多 CSS属性，有些 属性我们对其 声明并赋值，有些 属性则没有，我们可能会想当然的以为一个 元素会拥有多少 CSS属性是由我们预先声明所决定的，但事实上并不是，每个 元素所拥有的 CSS属性其实是固定的，每个 CSS属性其实都有值，我们预先声明的 CSS属性只不过是将它的 默认值覆盖了而已

对于浏览器而言，一个元素只有它的所有CSS属性都有值才能将其渲染出来

无论这个值是使用默认值还是使用预先定义的值
有时候我们可能会对以下代码产生疑惑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>p</p>
        <a href="">>=</a>
    </div>
</body>

</html>

为什么a元素的颜色没有继承？
我们大可以说是因为a元素比较特殊，无法继承，必须要单独对a元素进行设置，但下面这段代码呢

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
            font-family: 'fira code';
        }
    </style>
</head>

<body>
    <div>
        <p>p</p>
        <a href="">>=</a>
    </div>
</body>

</html>

为什么这段代码有的地方被继承了有的地方没有被继承
想要弄清楚这一切，就需要知道在CSS中属性值是怎么被计算出来的
整个属性值的计算过程分为四个部分

用户代理样式表

在正式开始学习CSS样式计算过程之前，我们需要先知道什么是用户代理样式表

在CSS中，除了属性原本就有的默认值之外，浏览器本身也会针对一些元素设置一些属性值，这些被浏览器定义的属性被称为用户代理样式表

按理来说用户代理样式表的优先级应该最低，但在某些时候用户代理样式表会在某些时候反过来覆盖用户所设置的样式
有了用户代理样式表，浏览器就能保证在没有任何CSS样式定义的情况下网页仍有基本外观与展现

确认声明值

确认声明值是整个CSS样式计算中的第一步，在这一步中浏览器会将用户直接定义在目标元素上的CSS和浏览器自带的代理用户样式表进行比较，将其中没有冲突的部分作为最终CSS

确认声明值

如果我们有一个元素，它的用户代理样式表和用户设置的样式表如上图，可以看到margin-block-start和margin-block-end和color属性是没有冲突的，可以直接作为该元素的最终的对应属性的属性值，而display属性因为在用户代理样式表和用户自己设计的样式表中都出现了，所以此阶段不会为包括此属性的其他属性赋值

层叠冲突

这一个阶段主要有三个步骤，一个是判断重要性，一个是判断权重，一个是判断源次序

通过以上规则已经获得属性值的属性将不会参加下面的计算

重要性

参考上图，既然用户代理样式表和用户设置的样式表中都有display属性，那么该用哪个呢，浏览器给出的答案是判断用户代理样式表和用户设置的样式表的重要性，哪个更重要就用哪个，很明显用户设置的样式表更加重要

重要性

权重

到了这一步用户代理样式表可以退出整个CSS样式计算流程了，接下来我们就要是开始判断用户设置的样式表里那些冲突样式的权重了

浏览器通过比较每个选择器的权重来判断哪些选择器里的属性被应用到最终样式上

在CSS中的权重大体可以分为以下几种

选择器	权重
!important	无限大
内联样式	1000
id选择器	100
class选择器	10
伪类选择器	10
元素选择器	1
伪元素选择器	1

源次序

最后，当用户设置的样式表里有重复且权重相同的属性，浏览器会按照他在样式表中定义的次序来决定最终的样式，定义在后面的属性覆盖定义在前面的属性

继承

整个CSS样式计算的第三个阶段就是继承

浏览器会对那些仍没有值且可以继承的属性执行继承操作

如上图，因为font-size属于可以被继承且没有属性值的属性，父元素的font-size将被目标元素 继承
因为display属于不能被继承的属性，所以即便目标元素中此属性没有值也不能被继承

使用默认值

默认值是CSS样式计算中的最后一个阶段，浏览器会在此阶段对那个仍旧没有值的属性设置为他们的默认值

经历了以上步骤以后的元素的属性就都拥有了对应的属性值，能被浏览器正常渲染显示

关于a元素不能继承的问题

最后我们再来谈谈为什么a元素不能被继承的问题，我们知道继承发生在整个CSS样式计算中的第三个阶段，且只会对那些还未有值且能被继承的属性进行继承，color自然是能被继承的，没有被继承只能是因为它在此阶段之前就已经有值了，在层叠冲突阶段，没有权重影响，没有源次序影响，更没有重要性的影响，所以我们确定了color属性在第一个阶段就已经确定。
我们来看一下浏览器对于a元素的代理样式表

真相大白了，浏览器在第一步就根据用户代理样式表就确认了color的属性值，而继承发生在第三步，自然无法影响
想要解决这个问题也很简单：设置color的属性值为inherit就行
当浏览器遇到inherit时，将会读取目标元素的父元素的对应属性的值，并作用于目标元素的对应属性上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
            font-family: 'fira code';
        }

        a {
            color: inherit;
        }
    </style>
</head>

<body>
    <div>
        <p>p</p>
        <a href="">>=</a>
    </div>
</body>

</html>