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

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和room.这可能吗？这只是一个简单的例子,我有一个案例,代替类porch,还有更多的类,所以只覆盖一个类是!important不行的,因为可能有很多具有各种样式的类.

怎么能实现这一目标？

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