71

たとえば、ここにhtmlのコードがあります

<html>
 <body>
  <img src='an image source'/>
  <h1>Hi it's test</h1>
  <div id='mydiv'>
    <img src='an image source'/>
    <h1>Hi it's test</h1>
  </div>
 </body>
</html>

スタイリングに次のcssコードを使用した場合：

img{
   width:100px;
   height:100px;
}
h1{
   font-size:26px;
   color:red;
}

問題は次のとおりです。mydivdivタグ内のタグが、パブリックタグスタイルによるスタイリングから保護および分離するにはどうすればよいですか？

4

5 に答える 5

123

CSSカスケードおよび継承レベル3では、all省略形のプロパティとキーワードがunset導入されています。これらを組み合わせることで、これを簡単に実現できます。

たとえば、作成者all: initialが要素を指定すると、カスケードの作成者、ユーザー、またはユーザーエージェントレベルにルールが表示されていないかのように、すべての継承がブロックされ、すべてのプロパティがリセットされます。

これは、外側のページのスタイルを継承したくないページに含まれる「ウィジェット」のルート要素に役立ちます。ただし、その要素に適用された「デフォルト」スタイル（たとえば、display: blockなどのブロック要素のUAスタイルシートから<div>）も吹き飛ばされることに注意してください。

all: initialdivとall: unsetその子孫に適用する必要があります。

#mydiv {
  all: initial; /* blocking inheritance for all properties */
}
#mydiv * {
  all: unset; /* allowing inheritance within #mydiv */
}

idの代わりにdivでクラスを使用すると、その子孫のスタイルを設定するために作成するルールが、このルールで使用される高い特異性と一致または打ち負かされる必要がなくなります。

本当に安全にするために、潜在的な疑似要素の子孫のスタイルもブロックすることをお勧めします。

#mydiv::before,
#mydiv::after,
#mydiv *::before,
#mydiv *::after {
  all: unset;
}

または、ブラウザをより幅広くサポートするために、all既知のすべてのCSSプロパティを設定して手動で実行を試みることができます（プレフィックス付きのバージョンを忘れないでください）。

#mydiv {
  /*
   * using initial for all properties
   * to totally block inheritance
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  alignment-baseline: initial;
  animation: initial;
  backface-visibility: initial;
  background: initial;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  /*
   * using inherit for normally heritable properties,
   * and initial for the others, as unset does
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  color: inherit;
  ...
}

all省略形のプロパティのブラウザサポートを奨励し、次の問題のリンクを使用してその採用を追跡できます。

  • ☑Chrome37 + _
  • ☑Firefox27 + _
  • ☑Webkit （Safari 9.1以降）
  • ☐InternetExplorer _
  • ☑エッジ79+
  • ☑Opera24+

all省略形プロパティの最新のブラウザサポート情報は、こちらから入手できます。

于 2013-05-29T16:08:54.153 に答える
13

古い質問ですが、受け入れられた回答から少し変わっています。現在、CSSWGが推奨するキーワードがあります。これrevertは、プロパティを初期値（それらが使用されている要素）。したがって、たとえば、を使用すると、内部の表示は期待どおりに設定され、そうではありません（の初期値）。initialunsetrevertdiv#mydivblockinlinedisplay

あなたはこれをしなければならないでしょう：

#mydiv,
#mydiv::before,
#mydiv::after,
#mydiv *
#mydiv *::before,
#mydiv *::after {
  all: revert;
}

執筆時点でrevertは、Edge、Firefox、Chrome、Safariでサポートされていますが、IEやOperaではサポートされていません。

受け入れられた答えに関して考慮すべき他の何かもあります。内部で何かをスタイル設定する場合#mydivは、少なくともすべての設定を解除または元に戻すために使用したセレクターと同じくらい具体的なセレクターを使用してスタイルを設定する必要があります。そうしないと、そのルールの後にある場合でも、そのルールによってオーバーライドされます。 CSS。

したがって、次のようなことを行う必要があります（ルールの特異性#mydivを高めることに注意してください）。

#mydiv p {
  margin-top: 20px;
}

#mydiv .bg-black {
  background-color: black;
}

// etc.
于 2018-03-15T23:16:21.200 に答える
10

技術的にはできません。CSSが機能すると想定されているのはそのためです。スタイルシートにdivタグに定義されているスタイルがある場合、それはすべてのdiv要素に適用されます。

あなたが試すことができるいくつかのことは、タグ名でスタイルを設定せず、 代わりにクラス名を与え、クラスにスタイル宣言を与えることです。すべてのスタイルがどこに行くかを確認できるようにします。

また。特定のDivタグにスタイルを持たせず、他のDivにスタイルを持たせたい場合。いつでもリセットして、別のクラス名またはIDを指定し、スタイル宣言をリセットできます。

于 2012-04-08T16:07:48.257 に答える
3

iframeは、他のビジネスロジックを複雑にしない場合は、スタイルを分離するための適切なソリューションでもあります。さらに、これは純粋なJavaScriptで実行でき、古いブラウザーでも機能する可能性があります。

const HTMLToIsolate = `...` // get your div tag as HTML string
const parentContainerRef = document.body; // or something else
const newIframe = document.createElement('iframe');
// set height & width to 100% and remove borders for newIframe

parentContainerRef.appendChild(newIframe)
newIframe.contentWindow.document.open('text/html', 'replace');
newIframe.contentWindow.document.write(HTMLToIsolate);
newIframe.contentWindow.document.close();

// bonus to remove scroll bars by setting proper iframe's height
newIframe.addEventListener('load', function onIFrameLoad(e) {
    const iframeBody = this.contentDocument.querySelector("body");
    this.style.height = `${iframeBody.scrollHeight}px`;
});

これは、 MixedContentの警告なしに、また親HTMLスタイルが埋め込まれたHTMLをオーバーライドすることなく、リモートでフェッチされたWebページに複雑なHTMLファイルを埋め込む必要がある場合に完全に機能しました。この素晴らしいアイデアを提供してくれたhttps://benfrain.com/sandbox-local-htmlcss-code-snippets-inside-iframe-style-guidespattern-libraries/に感謝します。

CSSのトリックは、ここ#mydiv * { all: unset }で受け入れられているソリューションで提案されているように機能しますが、私のページには多くのDOMノードがあったため、複雑なブラウザー操作でなくなりました。

于 2019-08-17T22:12:02.033 に答える
2

役立つかもしれない1つのことは、IE7+を含むすべてのブラウザーで使用可能なCSS直接子セレクターです。これにより、子にカスケードされないスタイリングを適用できます。たとえば、コードで次のCSSを使用できます。

body > img {
  width:100px;
  height:100px;
}
body > h1 {
  font-size:26px;
  color:red;
}

そして、そのCSSは、BODY要素の要素に直接適用されるだけです。

于 2012-04-08T17:59:57.157 に答える