Question

这是CSS：

.parent div {
height: 25px;
width: 25%;
}

.child {
width: 50% !important;
height: 50px !important;
}

这是HTML：

<body>
<div class="parent">
    <div class="child">
        <p>CHILD</p>
    </div>
</div>
</body>

浏览器从上到下执行CSS。我了解了CSS层次结构，并据此确定了应该应用其代码的类。无论如何，它将应用.parent div代码。我怎么了？

Answer 1

更具体地讲解CSS并删除所有!important：

.parent div.child {
    width: 50%;
    height: 50px;
}

应该可以正常工作

Answer 2

您正在使用.parent div，这意味着它将对嵌套在.parent类内的所有div应用样式

<div class="parent">
  <p>This will not be affected as it's not div tag</p>
  <span>This will not be affected as it's not div tag</span>
  <div>This will be affected</div>
  <div class="child">This affects also</div>
</div>

这就是为什么它仅将.child类的样式应用于!important的原因，因为您必须覆盖子类。

以下是您可以使用的一些变体：

.parent {
  height: 25px;
  width: 25%;
}

.child {
  width: 50%;
  height: 50px;
}

.parent {
  height: 25px;
  width: 25%;
}

.parent .child {
  width: 50%;
  height: 50px;
}

Answer 3

！important实际上用于覆盖任何其他CSS规则，这些规则也可能适用于应用！important的元素，这可以确保不应用影响相同属性的其他css规则，从而确保样式标记为！important是适用的标记。

正如其他人所述，导致问题的原因是由于您使用了CSS选择器和组合器

更多阅读内容：https://www.w3schools.com/css/css_combinators.asp

Answer 4

.parent div具有比.child高的特异性。

但是，如果您使用.parent .child而不是仅仅使用.child，那么它的特异性比.parent div高，因此您无需添加!important，就像这样：

.parent .child {
   width: 50%;
   height: 50px;
}

一些有关CSS特异性的有用读物：

为什么在这种情况下必须使用！important？

4 个答案: