css属性值计算过程

204 阅读2分钟

css属性值计算过程

image-20250112135113202.png

在浏览器中每一个dom元素都有完整的css属性,每个css属性都有值。

CSS属性值计算过程就是让css属性从无属性值,到每个都有值;它有四个步骤:

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

确定声明值

image-20250112140300945.png

在浏览器中有一套默认的样式表叫浏览器默认样式表,比如p标签有一个默认的margin,是一个块级元素,这都是浏览器默认样式表设置的;开发者自己定义的样式表叫作者样式表

确定声明值就是确定浏览器默认样式表作者样式表中没有冲突的样式,把这一部分样式先确定下来

层叠冲突

这一步就是解决浏览器默认样式表作者样式表中有冲突的样式,使用层叠规则,确定CSS属性值。

1.比较重要性

image-20250112142224093.png

作者样式表 > 浏览器默认样式表

作者样式表与浏览器默认样式表的属性有冲突时,使用作者样式表的属性

2.比较特殊性(即比较权重)

!import >内联样式> id选择器 > 类选择器 、伪类选择器、属性选择器 > 元素选择器、伪元素选择器

每种选择器都有一个权重:

  • ID 选择器:100
  • 类选择器、属性选择器、伪类选择器:10
  • 标签选择器、伪元素选择器:1

根据权重计算确定优先级

 <style>
    .container span {
      color: green;
    }
    .practice {
      color: pink;
    }
     #test{
         color:red;
     }
  </style>
 <div class="container">
    <p>测试1</p>
    <span class="practice" id="test">测试2</span>
 </div>
  

image-20250112151736687.png

.container span的权重为10+1=11;.practice的权重为10; #test的权重为100;所以测试2的颜色为红色。

注意:不同种类选择器的优先级不以数量比较;也就是说100个class选择器优先级低于1个id;但是100个class选择器优先级大于99个class选择器。

3.比较源次序

当权重相同时,会比较样式声明的次序,即后面的会覆盖前面的

使用继承

image-20250112144735792.png

对仍然没有值的属性,若可以继承,则继承父元素的值

使用默认值

image-20250112144938156.png 对仍然没有值的属性,使用默认值

四个步骤走完所有属性都有值