12

いかなる方法でも変更できない外部スタイルシート (.css ファイル) が与えられました。ただし、このスタイルシートを単一の div に適用する必要があるため、既存の Web ページの div の内容を適用する必要があります。現在、スタイルシートの内容を、影響を与える必要がある div 内の空白のスタイル タグ (.innerHTML を使用) にテキストとして読み込んでいますが、これは単一の div だけでなく Web ページ全体に影響します。誰かがこれを手伝ってくれませんか？

4

8 に答える 8

12

IFRAME ソリューションは次のように機能します。

メインの HTML ファイルには、DIV があります。

<div id="myspecialdiv">
    <iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>

必要に応じてスタイリングしてください。divcontent.html ファイルは、DIV タグのコンテンツと、外部スタイルシートを使用する LINK を含む完全な HTML ファイルである必要があります。

<html>
    <head>
        <link rel="stylesheet" href="path/to/external/stylesheet.css" />
    </head>
    <body>
        <!-- The contents of your DIV -->
    </body>
</html>
于 2013-05-03T10:53:10.547 に答える
6

HTML5 を使用できる場合は、スコープ スタイルを使用してみてください。CSS を div 内に含めて、その親のみに影響を与えることができます。

<div>
    <style scoped>
        // Styles here
    </style>
</div>
于 2013-05-03T10:42:19.380 に答える
3

これはあなたを大いに助けます：

http://css-tricks.com/ Saving-the-day-with-scoped-css/

特定の区切られた escope にスタイルのみを適用します。幸運を！

私見はiframeソリューションよりも優れています..

関連：外部CSSの範囲を特定の要素のみに制限しますか?

于 2014-12-02T11:19:05.800 に答える
1

サーバー側のスクリプト (例: PHP) にアクセスできる場合は、外部スタイルシートをロードするスクリプトを作成し、すべてのエントリの前にクラス名を追加できます。次に、このクラスを DIV タグに適用します。したがって、CSS に以下が含まれている場合:

p { font-size: 12px; }

それを次のように変更します。

.mydiv p { font-size: 12px; }

DIVを次のようにフォーマットします

<div class="mydiv">...</div>

次に、外部スタイルシートを直接ではなく、スクリプトをスタイルシートとしてロードします。

<link rel="stylesheet" href="path/to/internal/script.php" />
于 2013-05-03T10:59:44.630 に答える
1

外部スタイル シートをそのままにして、外部スタイル シートから単一の div に影響を与えるクラスを含む内部スタイル シートを作成し、名前を変更して名前を変更したクラスを div に適用することをお勧めします。名前の変更は、これらのクラスの属性が、外部スタイルシートからページに既に存在する要素に影響を与える可能性があるためです。

<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>

お役に立てれば。

于 2013-05-03T10:47:52.250 に答える
0

スタイルを設定するドキュメントのセクションを対象とする CSS プレフィックスを割り当てることができます。

于 2013-05-03T10:45:19.380 に答える
0

外部ファイル内のスタイル仕様はクラスや ID に含まれていないと思いますが、それらはタグのような包括的な調整です<p>(したがって、ページ ヘッダーに含めることはできません)。タグに div を含め、<style scoped>そこに .css ファイルをインポートします。参照: http://css-tricks.com/ Saving-the-day-with-scoped-css /

于 2013-05-03T10:43:48.293 に答える
0

scoped良い考えですが、ブラウザの互換性の問題があります。

css ファイルのすべてのセレクターの前に pre-class を追加することで、この問題を解決します。

https://github.com/ericf/grunt-css-selectors

于 2016-07-25T06:33:28.880 に答える