Question

假设我有以下标记： -

<div class="house">
  <p>...</p>
  <div class="room">
    <p>...</p>
  </div>
</div>

<div class="house">
  <p>...</p>
  <div class="room porch">
     <p>...</p>
  </p>
</div>

CSS： -

.house .room { /* Some styling done here */ }

.porch { /* Some different styling done here */ }

现在，我希望我的div room和porch只考虑班级porch并忽略house和{{1}的样式}。这可能吗？这只是一个简单的例子，我有一个案例代替类room，还有更多的类，所以只覆盖一个porch的类是行不通的，因为可能有一个很多具有各种风格的课程。

如何实现这一目标？

Answer 1

您可以使用:not

.house .room:not(.porch) { 
      /* .room elements only when they have not .porch class */ 
}

.porch { 
      /* all .porch elements */
}

浏览器支持：https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Answer 2

选择器对所选样式规则有效。

在样式顺序中稍后出现的选择器否决了之前的选择器
具有较高特异性的选择子否决了具有较低特异性的选择子，即使后者优先于前者

所以制作这个选择器。
. house .room.porch

如何让div及其子代忽略其父样式？

2 个答案: