用单独的子类覆盖设置为parentClass> div {}的子div属性

Question

我在CSS中使用parentClass>div{ }方法在父类中设置了所有div标签的属性。然后，我为div标签之一分配了一个名为child的单独的类。但是我在child中设置的任何内容都不会影响该div标签。

.parent>div {
  padding: 10%;
  border: 1px solid green;
}

.child {
  padding: 0;
  border: 1px solid green;
}

<div class="parent">
  <div>something</div>
  <div class="child">CHILD</div>
</div>

如何使child类有效。

Answer 1

.parent>div选择器的CSS specificity比.child选择器高。您需要一种提高.child的特异性的方法。您可以使用!important。

另一种方法是在选择器中仅使用.child类两次，如下所示

.parent>div {
  padding: 10%;
  border: 1px solid green;
}

.child.child {
  padding: 0;
  border: 1px solid green;
}

<div class="parent">
  <div>something</div>
  <div class="child">CHILD</div>
</div>

另一种方法是使用.parent>div:not(.child)忽略样式.child元素，这些元素是.parent的直接子元素

.parent>div:not(.child) {
  padding: 10%;
  border: 1px solid green;
}

.child {
  padding: 0;
  border: 1px solid green;
}

<div class="parent">
  <div>something</div>
  <div class="child">CHILD</div>
</div>