CSS优先级疑问：为何id样式未覆盖class背景反而显示为紫色边框？

你的#outer-box确实已经应用了紫色背景，视觉上看似“边框”是因为外层div的padding区域展示了紫色背景，内部子元素的蓝色背景覆盖了外层div的内容区，具体原因如下：

1. 优先级规则已生效：最外层的<div class="box" id="outer-box">同时拥有.box类和#outer-boxid，根据CSS优先级规则，id选择器权重高于class选择器，所以#outer-box的background-color: purple确实覆盖了.box的蓝色背景，外层div的背景色是紫色。
2. padding样式的影响：.box类设置了padding: 10px，这个样式同样作用在最外层div上（因为它属于.box类），所以外层div的内容区和元素边缘之间存在10px的padding空间。
3. 子元素的背景覆盖：外层div内部的两个子元素都是<div class="box">，它们的背景色是蓝色，且会填充外层div的内容区。所以你看到的蓝色区域是子元素的背景，而外层div的紫色背景只在10px的padding区域显示，视觉上就像紫色的“边框”。

验证方法 #

可以通过修改#outer-box的样式来验证：

#outer-box {
  background-color: purple;
  border: 2px solid black; /* 添加黑色边框，清晰区分外层div的边缘 */
}

添加边框后，就能看到紫色区域是外层div的padding部分，而非边框。

原代码参考 #

CSS代码

.box {
  background-color: blue;
  padding: 10px;
}
#outer-box {
  background-color: purple;
}

.inner-box {
  background-color: red;
}

p {
  color: yellow;
  margin: 0;
  padding: 0;
}

.white-text {
  color: white;
}

HTML代码

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

<head>
  <meta charset="UTF-8">
  <title>CSS Cascade</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="box" id="outer-box">
    <div class="box">
      <p>Yellow Text</p>
      <div class="box inner-box">
        <p class="white-text">White Text</p>
      </div>
    </div>
    <div class="box">
      <p>Yellow Text</p>
      <div class="box inner-box">
        <p class="white-text">White Text</p>
      </div>
    </div>
  </div>
</body>

</html>

内容的提问来源于stack exchange，提问作者Jaybee365