0

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

ただし、これは少しハッキーな解決策のように思えます。より適切な解決策があれば素晴らしいでしょう!

4

1 に答える 1

0

最終的に を使用する必要がある場合は、セレクターを反転するnot必要があります。

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

しかし、他の方法でセレクターを設計する方が良いです

于 2013-10-31T22:56:29.433 に答える