如何让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 */ } 

，我想我与类room和porch DIV只考虑类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

Answer 2

这是一个问题，其中选择是在所选择的样式规则的作用。

1. 选择器就是到造型以便后来否决的那些名字前
2. 选择器具有较高的特异性推翻那些具有特异性较低，即使后者来前者

后，因此，请这个选择器。
. house .room.porch