css - css3 'not' 选择器可以排除多个选择器吗？

Question

代码如下:

html:

<div>1</div>
<div>2</div>
<div class="notme">
    <div>notme!
        <div>notme!</div>
    </div>
</div>

CSS:

div:not(.notme){
    background: #f00;
}
div:not(.notme *) {
    background: #f00;
}

结果是 'div:not(.notme *)' 不起作用。

那么问题来了:css 'not' 选择器可以排除一个div 及其所有子节点吗？还是有其他更好的解决方案？

Answer 1

您可以通过对具有类 .notme 的元素应用不同的样式来覆盖应用到您的 div 元素的样式:

div {
    background: #f00;
}

div.notme,
div.notme div {
    background: #fff;
}

<div>1</div>
<div>2</div>
<div class="notme">
    <div>notme!
        <div>notme!</div>
    </div>
</div>