为什么我要使用！在这种情况下重要吗？答案

【问题标题】：Why do I have to use ! important in this case?为什么我要使用！在这种情况下重要吗？
【发布时间】：2015-09-12 00:53:19
【问题描述】：

我正在学习 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; 的方法吗？

【问题讨论】：

标签： css less

【解决方案1】：

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

extra-questions minor-action

你需要做的

minor-action extra-questions

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

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

.minor-action.extra-questions

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

【讨论】：

对MDN !important 链接感到惊讶，因为他们没有指出!important 覆盖了inline-styles，这是IMPORTANT 的事情。这是您需要使用!important 的时候。说这是不好的做法，“将应用更具体的声明”只是 CSS 的正常行为......
感谢您的回答。但由于某种原因，没有! important;，即使我按照你说的顺序列出类，我也做不到。

【解决方案2】：

您的示例没有 !important - http://jsfiddle.net/sgguap7v/

没有这种情况，它不起作用！重要 - 1.规则是跟班-.extra-questions {} .minor-action {} 2. 规则的权重更高——button.minor-action {} 它的权重比.minor-action {} 更大

【讨论】：

【解决方案3】：

css 规则的应用取决于您调用它们的顺序，并且它们越具体。

如果您有 2 条规则定义 margin-top，那么浏览器必须决定应用哪一条。为此，它会从上到下读取您的 css 文件，并根据以下内容计算每个规则的优先级。

优先级 1：#id（ID 是唯一的选择器，非常重要）
优先级 2：.class（然后是它们的类不如 ID 重要，但仍然）
优先级 3：元素（最后是大多数时候被覆盖的通用样式，这是您的默认样式）

每次添加嵌套选择器时，它也会添加到优先级：

body.class 比 .class 更重要，body #id 比 body.class 更重要等等...

最后，如果规则以相同的优先级结束，则应用最后一个。

在代码中设置!important 标志是一种人为地提高特定规则优先级的方法。但是，如果您最终与!important 具有相同的规则，则将适用上述优先级规则。

【讨论】：

【解决方案4】：

如果你这样做，覆盖将起作用

.minor-action{
    margin-top: 0em;
}

您没有将任何样式应用于.extra-questions，而是应用于.minor-action。确实，您适用于相同的元素。但级联就是这样工作的。

这会有所帮助：How to override the properties of a CSS class using another CSS class

还有这个：http://www.w3.org/TR/CSS2/cascade.html#cascade

【讨论】：

【解决方案5】：

因为它已经在.minor-action 上面的类中设置，如果设置了它不会覆盖，除非你使用!important

【讨论】：

【解决方案6】：

您的第一个选择器更具体，它适用于作为表单子级的元素，它只是覆盖适用于任何 .yourclass 的最通用（第二个），无论其在文档层次结构中的位置如何。您可以通过选择表单 .yourclass 来摆脱重要的内容。

【讨论】：