CSS样式的计算过程_css 计算

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

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

确定声明值

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

层叠冲突

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

1. 比较重要性
   重要性从高到低分为

• 作者样式表中带 !import 的样式：带有import 的样式的优先级非常高，可以打破默认的优先级规则
• 作者样式表中的普通样式
• 浏览器默认样式表中的样式：作者样式表中没有相应属性的值时会使用该值

.mask {
            font-size: 18px !important;
            font-size: 20px;
        }
1
2
3
4

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

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

• 千位：如果有内联样式该值为1，没有该值为0
• 百位：该值等于所有ID选择器的数量
• 十位：该值等于选择器中所有类选择器、属性选择器和伪类选择器的数量
• 个位：该值等于伪元素选择器和元素选择器的数量

 #first {
            font-size: 30px;
        }
 
        .mask {
            font-size: 18px;
            font-size: 20px;
        }
1
2
3
4
5
6
7
8

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

由此可见id选择器的优先级更高元素的样式为id选择器设置的样式，即便类选择器设置的样式写在后面。
同时，选择器的优先级不会因为该类选择器的数量的多少而发生变化，也就是说量变不会引起质变
3. 比较顺序
对同一个元素设置同样的样式，在重要性和优先级相同的情况下写在后面的样式覆盖前面的样式。

 .mask {
            font-size: 18px;
            font-size:20px;
        }
1
2
3
4

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

由此可见后面的font-size属性生效此时的字体大小为20px

使用继承

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

 .mask {
            font-size: 18px;
        }
1
2
3

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

由此可见没有给p元素设置字体的大小但是p中的字体大小和div中的字体大小相同，此时p继承了div元素中的font-size属性的值

使用默认值

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

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

由此可见即便没有设置任何样式，字体也同样有一定的大小，此时字体的大小使用的是默认的值

总结

1. CSS样式计算有四个步骤

• 确定声明值
• 层叠冲突
• 使用继承
• 使用默认值

2. 选择器的优先级不会因为该类选择器的数量的大小而发生变化，即量变不会发生质变
3. 带有!import的样式优先级非常高，可以打破计算规则