如果使用“！important”，如何使用 removeClass()？答案

【问题标题】：How to use removeClass() if "!important" is used?如果使用“！important”，如何使用 removeClass()？
【发布时间】：2017-09-23 03:53:00
【问题描述】：

为了覆盖我无法更改的 CSS，当文本“Turkey | Meats”出现时，我需要使用“!important”规则将“hide”类添加到第一个 li。

现在，当我尝试使用 .removeClass() 删除“隐藏”类时，“隐藏”仍然存在，我认为这是因为“！重要”规则。这是我的编码：

(function($) {
  if ($(".nav li:nth-of-type(2)").text().trim() == "Turkey | Meats") {
    $(".nav li:nth-of-type(1)").addClass("hide");
  } else {
    $(".nav li:nth-of-type(1)").removeClass("hide");
  }
});

.hide {
  display:none !important;
}

<div class="nav">
  <ul class="nav-list">
    <li class="nav-link">
      <a href="">Fish</a>
    </li>
    <li class="nav-link">
      <a href="">Turkey | Meats</a>
    </li>
  </ul>
</div>

【问题讨论】：

Can I use jquery to remove/negate css !important rule?的可能重复
你检查过元素吗？类真的被删除了吗？
尝试 console.log 元素。 !important 根本不影响类删除...

标签： jquery html css

【解决方案1】：

添加/删除类工作正常，检查这个例子：

if ($(".nav li:nth-of-type(2)").text().trim() == "Turkey | Meats") {
        $(".nav li:nth-of-type(1)").addClass("hide");
        console.log("Fish class: "+$(".nav li:nth-of-type(1)").attr("class"))
} else {
        $(".nav li:nth-of-type(1)").removeClass("hide");
        console.log("Fish class: "+$(".nav li:nth-of-type(1)").attr("class"))
}
$("button:first").click(function(){
    $(".nav li:nth-of-type(1)").removeClass("hide");
    console.log("Fish class: "+$(".nav li:nth-of-type(1)").attr("class"))
});
$("button:last").click(function(){
    $(".nav li:nth-of-type(1)").addClass("hide");
    console.log("Fish class: "+$(".nav li:nth-of-type(1)").attr("class"))
});

.hide {
  display:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <ul class="nav-list">
    <li class="nav-link">
      <a href="">Fish</a>
    </li>
    <li class="nav-link">
      <a href="">Turkey | Meats</a>
    </li>
  </ul>
  <button type="button">Remove Class .hide</button>
  <button type="button">Add Class .hide</button>
</div>

【讨论】：