避免使用！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>

Answer 2

您需要提高选择器的特异性。 ID选择器具有比类选择器更高的特异性，因此您可以尝试使用以下类来选择ID：

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

您可以阅读有关特异性on MDN的更多信息，并尝试在将来避免使用ID进行样式化。