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

Question

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

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

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

Answer 2

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

extra-questions minor-action

你需要做的

minor-action extra-questions

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

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

.minor-action.extra-questions

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

Answer 3

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

.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

Answer 4

你的例子没有 !important - http://jsfiddle.net/sgguap7v/

如果没有这种情况，它不起作用！重要 - 1.规则是遵循class - .extra-questions {} .minor-action {} 2. 规则具有更高的权重 - button.minor-action {} 它具有比 .minor-action {}

更大的权重

Answer 5

根据您调用它们的顺序应用 css 规则，它们越具体。

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

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

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

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

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

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

Answer 6

你的第一个选择器更具体，它适用于作为表单子元素的元素，它只是覆盖最通用的（第二个）适用于你的任何 .yourclass 而不管它在文档中的位置等级制度。您可以通过选择表单 .yourclass 来摆脱重要的。

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

Why do I have to use ! important in this case?

css

less