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

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

CSS有选择地应用样式

1 个答案: