css - 为什么我必须使用!在这种情况下重要吗？

Question

我正在学习 CSS，我得到了我想要的结果，但前提是我使用 ! important;规范。我不明白为什么我不能覆盖继承一个类的属性并覆盖一个属性。

form button.minor-action,
#profile-left a.action,
.minor-action {
  display: inline-block;
  background: @lightBlue;
  color: white;
  padding: 0 1.2em;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  border: none;
  height: 25px;
  margin-top:1.0em;
  line-height:25px;
  white-space: nowrap;
  &:visited {
    color: white;
  }
  &:hover, &:active, &:focus {
    background-color: darken(@lightBlue, 10%);
    text-decoration: none;
  }

  &.call-to-action {
    background-color: @pink;
    &:hover, &:active, &:focus {
      background-color: darken(@pink, 10%);
      text-decoration: none;
    }
  }
}

.extra-questions {
  margin-top: 0em !important;

}

我想如果我对一个按钮使用上面的样式:

<button id="add_question" class="extra-questions minor-action">{% trans "Lägg till ny" %}</button>

那么我就不必使用 ! important;声明和覆盖将在没有它的情况下工作，但事实并非如此。我错过了什么？你能帮我理解为什么没有! important它就不能工作吗？声明，或者告诉我一个不用 ! important; 的方法？

Answer 1

它没有被覆盖是不完全正确的，因为它在上面的类中设置，在这种情况下，它不是由于你的 LESS 的顺序 - 它没有被覆盖，因为你以错误的顺序列出了你的类 - 而不是

extra-questions minor-action

你需要做的

小 Action 额外问题

在表示类时，如果它们共享相同属性设置的值 - 最后应用的类的值将优先。

或者，您可以在您的 LESS 中为您的类添加更多特异性，将 extra-questions 嵌套在 minor-action 中，并以 & 为前缀>。这意味着 HTML 中类的顺序无关紧要，组合才是重要的。输出 CSS 将是:

.minor-action.extra-questions

此外，我相信您知道，使用 !important应该避免