CSS属性的计算过程分为四步

确定声明值

开发人员在编程时，编写的样式表中给每个属性设置的值，如果有的属性没有声明，如果可以继承使用继承值，如果不能使用继承，使用浏览器的默认值

层叠是CSS的特性之一，层叠是指相同样式多次作用于同一个元素时确定该样式的值的过程。浏览器会根据以下规则进行计算

.mask {
            font-size: 18px !important;
            font-size: 20px;
        }

<div id="first" class="mask">
        这是一个DIV
    </div>

在这里插入图片描述由此可见，带有import的样式的优先级更高，即便后面还有一个相同的样式仍不会被覆盖 2. 比较选择器的优先级浏览器通过一个四位数进行计算

 #first {
            font-size: 30px;
        }
 
        .mask {
            font-size: 18px;
            font-size: 20px;
        }

 <div id="first" class="mask">
        这是一个DIV
    </div>

在这里插入图片描述由此可见id选择器的优先级更高元素的样式为id选择器设置的样式，即便类选择器设置的样式写在后面。同时，选择器的优先级不会因为该类选择器的数量的多少而发生变化，也就是说量变不会引起质变 3. 比较顺序写在后面的样式优先

 .mask {
            font-size: 18px;
            font-size:20px;
        }

  <div class="mask">
        这是一个DIV
    </div>

在这里插入图片描述由此可见后面的font-size属性生效此时的字体大小为20px

继承值是在前面过程完成后还有样式没有值得情况下继承能进行继承的样式的值通常情况下字体样式可以被继承

 .mask {
            font-size: 18px;
        }

        <div class="mask">
        这是一个DIV
        <p>这是一个段落</p>
    </div>

在这里插入图片描述由此可见没有给p元素设置字体的大小但是p中的字体大小和div中的字体大小相同，此时p继承了div元素中的font-size属性的值

该步骤是在前三个步骤完成后仍没有值的属性使用默认值

 <div id="first" class="mask">
        这是一个DIV
    </div>

在这里插入图片描述由此可见即便没有设置任何样式，字体也同样有一定的大小，此时字体的大小使用的是默认的值