为何添加.drop类后display:block不生效，需加!important才有效？

我在HTML中给第一个.Appear元素设置了内联样式display:none，期望点击单选框时，通过JS为对应.Appear元素添加.drop类，使其在CSS中通过.Appear.drop设置display:block来显示内容，但未加!important时此设置不生效，添加后才正常工作，想了解背后的原因。

我的代码 #

JS代码

let EquiConst = document.querySelector("#Eqi");
let RectConst = document.querySelector("#Rec");
let IsoConst = document.querySelector("#Iso");

let NewW = document.querySelectorAll(".Appear");

var radioButtons = document.querySelectorAll('input[type="radio"]');

// 参考了Azoof Ahmed的代码并做扩展，适配三个元素
function handleChange(e) {
  if(e.target.value === 'equilateral') {
    NewW[0].classList.add("drop");
  } else {
    NewW[0].classList.remove("drop");
  }

  if(e.target.value === 'rectangle') {
    NewW[1].classList.add("drop");
  } else {
    NewW[1].classList.remove("drop");
  }               
  
  if(e.target.value === 'isosceles') {
    NewW[2].classList.add("drop");
  } else {
    NewW[2].classList.remove("drop");
  }
}

// 给所有单选框绑定change事件
radioButtons.forEach(function(radioButton) {
  radioButton.addEventListener('change', handleChange);
});

// 给第一个.Appear添加输入框
let sideEqui = document.createElement("input")
let child1 = NewW[0].appendChild(sideEqui);

CSS代码

.Appear {
    width: 100%;
    transition: padding 0.5s;
}
.Appear.drop {
    display: block !important;
    height: 20px;
    padding-top: 2px;
}

HTML代码

<div class="outer_content">
  <form>  
    <p>Choose the triangle type:</p>  
    <input class="App" id="Eqi" type="radio" name="Type" value="equilateral">Equilateral<br>  
    <div class="Appear" style="display: none;"></div>
    <input class="App" id="Rec" type="radio" name="Type" value="rectangle"> Rectangle <br>  
    <div class="Appear"></div>
    <input class="App" id="Iso" type="radio" name="Type" value="isosceles">Isosceles <br>
    <div class="Appear" ></div>  
  </form>
</div>

核心原因：CSS优先级规则 #

这是因为内联样式的优先级远高于类选择器。CSS优先级按权重计算，权重越高的规则越优先：

• 内联样式（写在元素style属性里的代码）权重为1000
• ID选择器权重为100
• 类选择器、伪类选择器权重为10
• 标签选择器权重为1

你的.Appear.drop是两个类选择器组合，总权重是10+10=20，完全比不过内联样式的1000。所以即使给元素加了.drop类，display:block的规则也会被内联的display:none覆盖，必须加!important才能强制覆盖内联样式的规则。

更规范的解决方案 #

尽量避免使用!important（它会打破正常优先级逻辑，后期维护易出问题），可以改用类来控制元素隐藏：

1. 在CSS里新增隐藏类：

.hide {
    display: none;
}

2. HTML里把第一个.Appear的内联样式换成这个类：

<div class="Appear hide"></div>

3. JS里修改逻辑，切换.drop类的同时移除.hide类：

if(e.target.value === 'equilateral') {
  NewW[0].classList.add("drop");
  NewW[0].classList.remove("hide");
} else {
  NewW[0].classList.remove("drop");
  NewW[0].classList.add("hide");
}

这样用类控制显示隐藏，遵循正常优先级规则，就不需要!important了。

内容的提问来源于stack exchange，提问作者Sung-99