CSS有选择地应用样式

Question

我正在尝试创建一个允许您预览HTML文件的编辑器页面。

但是，问题是编辑器样式被预览的HTML文件继承，例如：

<div class="header">
    <div class="top">
        Editing HTML page - page1.html
    </div>
</div>

<div class="preview">
    <div class="header">
        <div class="top">
            Page 1.html
        </div>
    </div>
</div>

我知道一种解决方法是使用IFRAME，但是我不希望这样做，因为我将允许拖放功能。

CSS解决方案很棒，我确实想到了使用jquery将类添加到“预览”区域中的每个项目，并在编辑器页面中使用以下CSS：

.header:not(.preview) {
    background-color:#000;
}

.top:not(.preview) {
    color: #fff;
}

但是，这似乎有点棘手，如果有一个更整洁的解决方案，那就太好了！

Answer 1

如果最终需要使用not ，则应反转选择器：

:not(.preview) > .header { background-color:#000; }
:not(.preview) > .header .top { color: #fff; }

但是最好以其他方式设计选择器