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

但是最好以其他方式設計選擇器