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

你需要做

minor-action extra-questions

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

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

.minor-action.extra-questions

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

Answer 2

如果你这样做，

覆盖将起作用

.extra-questions

您没有将任何样式应用于.minor-action，而是应用于{ "_id" : "USR_1", "username" : "willsmith123", "firstname" : "will", "lastname" : "smith", "status" : "ACTIVE", "image" : { "_id" : ObjectId("558be8062f194d2587000001") "chunkSize" : 261120, "uploadDate" : ISODate("2015-06-25T10:20:47.105Z"), "length" : 25038, "md5" : "b1d38a0b2ccde6da71fd6ae8fe2f637f", "filename" : "mylogo.png" } }。它适用于同一个元素。但是级联就是这样的。

这会有所帮助：http://facebook.com/profile.php?id=100000218905189

而且：How to override the properties of a CSS class using another CSS class

Answer 3

您的示例无效！重要 - http://jsfiddle.net/sgguap7v/

它不起作用！没有那个案例很重要 - 1.规则是遵循课程 - .extra-questions {} .minor-action {} 2.规则的权重较高 - button.minor-action {}它的权重大于.minor-action {}

Answer 4

因为它已在.minor-action上方的类中设置，如果已设置，则除非您使用!important

，否则不会覆盖

Answer 5

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

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

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

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

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

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

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

Answer 6

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

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

6 个答案: