html - 避免使用 !important css 属性来显示我的容器

Question

我显示/隐藏一个容器，里面有盒子，如下所示。

我使用一个简单的机制与 toggleClass 来显示/隐藏容器。

    $("#btn").click(
        function () {
            $("#switch-apps-panel").toggleClass('flex-apps-panel');
        }            
    );

问题是我不得不在 css 上使用 important 属性，我宁愿避免它。

.flex-apps-panel {
    display: flex !important;
}

对稍微更改我的代码以避免使用 important 属性有什么帮助吗？

jsFiddle:https://jsfiddle.net/hg60e8gf/

Answer 1

您将 switch-apps-panel 定义为 ID。 ID 总是比类名排名更高、更具体。

为了摆脱你的 !important 声明，要么将 ID 更改为一个类，要么使你的选择器更具体，并将 ID 选择器添加到你的 .flex-apps-panel 像这样:

#switch-apps-panel.flex-apps-panel {
    display: flex;
}

这里我把它改成了一个类:

$(document).ready(function() {
  $("#btn").click(
    function() {
      $(".switch-apps-panel").toggleClass('flex-apps-panel');
    }
  );
});

.switch-apps-panel {
  display: none;
  z-index: 9999;
  position: fixed;
  top: 70px;
  left: 10px;
  background-color: white;
  border: 1px solid #b6b6b6;
  box-sizing: content-box;
  box-shadow: 0 1px 15px rgba(0, 0, 0, .4);
  padding: 10px 10px 10px 10px;
}

.flex-apps-panel {
  display: flex;
}

.box-1 {
  margin: 8px;
  width: 100px;
  background-color: yellow;
}

.box-2 {
  margin: 8px;
  width: 100px;
  background-color: blue;
}

.box-3 {
  margin: 8px;
  width: 100px;
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
By default, boxes are hidden.

<button id="btn">Click here to show/hide boxes</button>

<div class="switch-apps-panel">
  <div class="box-1">
    <span>First</span>
  </div>
  <div class="box-2">
    <span>Second</span>
  </div>
  <div class="box-3">
    <span>Third</span>
  </div>
</div>