4

ちょっとググっても答えが出なかったので質問させてください。スタイルシート全体を適用する必要がある、id などの特定の要素特性を指定する方法はありますか?

たとえば、このようなhtmlのブロックがあるとします

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./style.css">
    </head>
    <body>
        <div id="my_id">
            <!-- A bunch of elements here -->
        </div>
    </body>
</html>

スタイル シートの各ルールの前に指定するのと同様に、./style.cssin に含まれるルールが一致する要素にのみ適用されるように指定する方法はありますか。#my_id#my_id

各ルールがこれを達成する前に指定することは理解#my_idしていますが、スタイルシートに肥大化を追加する必要なしにそれを行う方法があるかどうか疑問に思っています.

私は、必要な他のすべての GUI 要素を作成して配置する特定のページに「コンテナー」要素を作成する、グリースモンキー (ユーザースクリプト) スクリプトに取り組んでいます。CSS がページ上の CSS に干渉することは望ましくありません (ページに既に存在するルールを誤って書きすぎてしまうなど)。「ラッパー」要素および/またはその子にのみ適用されます。

4

3 に答える 3

3

私の知る限り、これは不可能です。あなたが述べたように、ルールに ID のプレフィックスを付けることができますが、これはあなたがやりたかったことではありません。

ただし、1 つの ID に対してスタイルシートを指定する必要はありません。ID はページのコンテキスト内で一意であると想定されているためです。さらに、異なるページで異なる目的を果たす要素に同じ ID を適用することは、よくある JavaScript ページの記述を非常に混乱させる可能性があるため、悪い習慣だと思います。

于 2012-12-05T08:21:21.477 に答える
1

そして、これが人々がSASSを使い始めた理由の1つです。SASSでは、これはidクラス内のすべてのcssクラスを次のようにネストするのと同じくらい簡単です。

#my_id {
  // all styles without editing
  // Now all these styles are applied only if they fall
  // under the element with id "my_id".
}

編集：他の（醜い）オプションはiframe、divの代わりに使用し、その中に子要素とスタイルシートをロードして、次のようにサンドボックス化することです。

<html>
    <head></head>
    <body>
        <iframe id="my_id">
            <html>
                <head>
                    <link rel="stylesheet" type="text/css" href="./style.css" />
                </head>
                <body>
                    <!-- A bunch of elements here -->
                </body>
            </html>
        </iframe>
    </body>
</html>

PS：Doctypeを追加することを忘れないでください。簡単にするために、例には追加していません。

于 2012-12-05T08:27:01.640 に答える
0

> セレクターを使用して #my_id 内の要素にスタイルを適用できます。例：

#my_id {
  /* some style for #my_id */
}

#my_id > p {
  /* this will style all p tags within #my_id */
}
于 2012-12-05T08:21:07.707 に答える