CSS样式优先级疑难：使用.box与.active组合类时为何依赖!important？如何移除？

你遇到的核心问题是CSS选择器权重相同引发的样式覆盖，以及部分选择器权重不足，所以才需要用!important强制生效。咱们一步步拆解根源：

1. 为什么.active的尺寸始终是90px？ #

.box和.active都是单个类选择器，权重完全一致（类选择器权重为0,1,0）。如果你的CSS代码里.box的定义写在.active之后，那么.box里的width:90px和height:90px就会覆盖.active的100px——同权重的样式，后定义的会优先生效。

2. 为什么.box:hover.active .title需要!important？ #

.title是单独的类选择器（权重0,1,0），而.box:hover.active .title是复合后代选择器（权重0,3,0），理论上权重更高。但如果你的.title样式定义在这个复合选择器之后，或者存在其他同权重的干扰样式，就会导致它无法自然覆盖，只能靠!important强制生效。

只需要调整选择器的写法，让目标样式的权重高于要覆盖的样式，就能摆脱!important的依赖：

1. 重构.active选择器 #

把单独的.active改成.box.active——这是两个类选择器的组合，权重提升为0,2,0，比单个.box的0,1,0更高，就能轻松覆盖.box里的尺寸样式：

/* 替换原来的.active */
.box.active {
  background-color: white;
  border: solid 5px white;
  border-radius: 5px;
  width: 100px;
  height: 100px;
  margin-top: 20px;
  box-shadow: 0 14px 6px -6px #313131;
  position: relative;
  animation: fadeactive 6s infinite;
}

2. 修正.box:hover.active .title的!important #

现在.box:hover.active .title的权重是0,3,0（两个类+伪类），远高于单个.title的0,1,0。只要确保这个复合选择器的定义在.title样式之后，直接去掉!important就能生效：

.box:hover.active .title {
  display: none;
}

3. 额外优化：精简重复代码 #

你会发现.box、.box:hover、.box.active里有大量重复样式（比如background-color、border等），可以把公共样式提取到.box中，只在hover和active里写变化的属性，让代码更简洁易维护：

.box {
  background-color: white;
  border: solid 5px white;
  border-radius: 5px;
  width: 90px;
  height: 90px;
  margin-top: 30px;
  box-shadow: 0 8px 6px -6px #313131;
  object-fit: fill;
  position: relative;
  cursor: pointer;
}
/* 只保留变化的属性 */
.box:hover,
.box.active {
  width: 100px;
  height: 100px;
  margin-top: 20px;
  box-shadow: 0 14px 6px -6px #313131;
}
.box.active {
  animation: fadeactive 6s infinite;
}
.box:hover.active .title {
  display: none;
}
.title {
  display: none;
  position: relative;
  font-size: 70%;
  background: black;
  color: white;
  border-radius: 5px;
  padding: 5px;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
  width: fit-content;
}

这样调整后，所有!important都可以移除，样式也能完全按预期生效啦~

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