html - 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;
}

然而，这似乎是一个 hacky 解决方案，如果有一个更整洁的解决方案，那就太好了！

Answer 1

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

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

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