使用单独的子类重写设置为 parentClass>div{} 的子 div 属性

Question

i使用CSS中的parentClass>div{ }方法在父类中设置所有DIV标签的属性。然后，我分配了一个名为child的单独类别的DIV标签之一。但是我在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选择器具有比.child选择器更高的CSS特异性。您需要一种增加.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>