二、CSS 层叠性¶

TIP

层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源（css 规则）的属性值的算法。
它在 CSS 处于核心地位，CSS 的全称层叠样式表正是强调了这一点。

我们来看下面这个例子

有两个 css 规则同时作用于同一个 div 标签，那最后之两个 css 规则中的属性值是如何合并计算的，以谁为主呢？这就需要一套明确的规则来规定，这套规则就是指CSS 层叠性。

<style>
  /* css规则1 */
  .box {
    color: red;
    font-size: 30px;
  }
  /* css规则2 */
  div {
    color: blue;
  }
</style>
<body>
  <div class="box">艾编程</div>
</body>

渲染效果： ![[Pasted image 20260226171030.png]]

1、CSS 层叠性解读¶

TIP

所谓的层叠性是指多个 CSS 规则可以同时作用于同一个标签，效果叠加，并不完全覆盖。
CSS 的层叠性有两层含义：叠加和覆盖
不同选择器作用同一元素，不同属性会叠加，相同属性会覆盖。
在覆盖时需要遵循以下两大原则：“就近原则” 和 “优先级”

2、CSS 的叠加原理¶

TIP

不同选择器作用于同一元素，不同属性会叠加作用于元素。

<style>
  /*
  以下三个选择器中的样式属性都不一样，则会叠加
  最后div效果：
  背景颜色：黄色
  字体大小：20像素
  字体颜色：红色
  */
  div {
    background: yellow;
  }
  div {
    font-size: 20px;
  }
  .box {
    color: red;
  }
</style>
<body>
  <div class="box">文本内容</div>
</body>

渲染效果： ![[Pasted image 20260226171142.png]]

3、CSS 的覆盖原则¶

在覆盖时需要遵循以下两大原则：“就近原则” 和 “优先级”

就近原则

当两个或多个优先级相同的选择器作用到同一个元素时。如果出现相同的 CSS 属性，则以写在后面的选择器中的属性为主。
所谓的就近原则是指，离 html 元素最近的那个为主。本质和选择器谁写在后面以谁为主是一个意思。

/*
以下两个选择器的优先级一样，
则相同属性会覆盖，覆盖时，以写在后面的为主
不同属性会叠加。
*/

div {
  /* background属性会叠加 */
  background: yellow;
  /* 无效 */
  color: blue;
}

div {
  /* font-size属性会叠加 */
  font-size: 20px;
  /* 选择器优先级一样，以后面为主，则此属性生效 */
  color: red;
}

/* 最终的css实际效果 */
div{
  background:yellow;
  font-size:20px;
  color:red;
}

优先级

当两条或多条规则（选择器）作用到同一个元素，如果出现相同的属性，则以优先级高的选择器中的属性值为主。

<style>
  /*
  基础选择器优先级从高到低分别是： id选择器 >class选择器 >标签选择器
  id优先级最高，则最后以id中的color:red为最终显示效果
  */
  #box {
    /* 生效 */
    color: red;
  }
  .box {
    /* 不生效 */
    color: blue;
  }
  div {
    /* 不生效 */
    color: green;
  }
</style>
<body>
  <div class="box" id="box">div中内容</div>
</body>

渲染效果： ![[Pasted image 20260226171321.png]]

4、层叠性的冲突处理¶

TIP

不同 css 规则集同时作用于同一个标签，不同属性相互叠加，相同属性会覆盖。
相同属性覆盖，首先需要计算选择器的权重，最后以选择器权重高的为主。
如果选择器权重相同，则写在后面的会覆盖写在前面的。
如果想要实现的效果，因为选择器因为权重低而不生效，则通过提高选择器权重来达到效果。

<style>
  /* id权重最高，样式全部应用 */
  #box {
    width: 200px;
  }
  /*
        .box与.box2权重一样，相同属性叠加，不同属性，以写在后面的为主
        最后生效样式：
        color:orange; background:skyblue; font-size:30px
    */
  .box {
    color: blue;
    background-color: skyblue;
  }
  .box2 {
    color: orange;
  }
  /*
        div权重低于.box和.box2，相同属性叠加，不同属性，以权重高的为主
        则color不生效，border属性生效
    */
  div {
    color: green;
    font-size: 30px;
  }
  /*
        计算后最终生效样式
        width:200px;
        color:orange;
        background-color:skyblue;
        font-size:30px;
    */
</style>
<body>
  <div class="box2 box" id="box">文本内容</div>
</body>

渲染效果： ![[Pasted image 20260226171442.png]]