CSS选择器优先级疑问：.blue-box宽度未覆盖.float-container div的100px

我遇到一个CSS理论问题：在.float-container div选择器中设置了盒子宽度为100px，而.blue-box类选择器中指定了宽度为330px，但蓝色盒子的宽度并未被覆盖。我知道如何解决这个问题，但想了解背后的原理——我原本认为类选择器比元素选择器更具特异性，请问问题出在哪里？

HTML代码 #

<div class="float-container">
      <div class="red-box">Box 1</div>
      <div class="blue-box">Box 2</div>
      <div class="orange-box">Box 3</div>
      <div class="yellow-box">Box 4</div>
      <div class="green-box">Box 5</div>
      <div class="pink-box">Box 6</div>
    </div>

CSS代码 #

.float-container div {
  border: 2px solid;
  height: 75px;
  width: 100px;
}

.red-box {
  background: red;
}

.blue-box {
  background: rgba(0, 0, 255, 0.493);
  text-align: end;
  width: 330px;
}

.orange-box {
  background: orange;
}

.yellow-box {
  background: yellow;
}

.green-box {
  background: green;
}

.pink-box {
  background: pink;
}

原理解析 #

你这里的核心问题是CSS选择器的特异性权重计算，不是单纯看单个选择器类型，而是看整个选择器链的权重总和：

• .float-container div 是「类选择器 + 元素选择器」的组合，按照特异性规则，它的权重为 10（类选择器权重） + 1（元素选择器权重）= 11
• .blue-box 是单个类选择器，权重仅为 10

因为前者的总权重更高，所以它设置的width:100px会优先生效，覆盖类选择器里的width:330px。

你之前的误区是只对比了单个选择器的类型，但CSS优先级是看选择器的整体权重叠加结果——组合选择器的权重会累加，只要总权重更高，优先级就更高。

常见解决思路（供参考） #

• 提升类选择器的权重：将.blue-box修改为.float-container .blue-box，此时权重变为10+10=20，就能覆盖原规则
• 强制提升优先级（不推荐）：在类选择器的width属性后添加!important，如width: 330px !important;
• 调整样式结构：避免使用高权重的后代选择器统一设置基础样式，改用类选择器批量控制

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