3

div がドキュメント内のすべての css ルールを無視し、代わりにそれ自体とそのすべての子ノードに別のスタイルシートを使用する可能性があるかどうか疑問に思っています。

ちょっとした例:

<html>
    <head>
        <style>
            div{color:red}
        </style>
    </head>
    <body>
        <div>This is red text</div>
        <div stylesheet="/path/to/my/stylesheet.css">
            This is text in a color defined in the other stylesheet
            <div>This is also not red</div>
        </div>
    </body>
</html>

ご覧のとおり、スタイルシートをグローバルではなく div に直接定義したいと考えています。そのようなことをする方法はありますか？

私が達成したいのは、コードのカプセル化です。疑似名前空間のような可能性もあると思いますが、それは地獄のように醜く、競合がないことを保証するものではありません...

アップデート

それまでの間、スタイル要素の「scoped」属性を見つけました。これは、私が要求したものと非常によく似た機能を果たします。ただし、ほとんどのブラウザーでサポートされていません。

より良い解決策はありますか？

4

1 に答える 1

3

<style scoped>属性なしではこれを行うことはできません。そして、あなたが言ったように、それは恐ろしくサポートされていません。これは GitHub のスコープ スタイル用の jQuery プラグインであり、より多くのブラウザーのサポートをプッシュします。@import other-stylesheet.cssこの jQuery プラグインを使用して、範囲指定されたスタイル定義を行うこともできます。

ただし、すべてを考慮すると、実際には 1 つの要素で複数のクラスを使用する方がよい場合があります。div にいくつかのクラスを与えると、プロジェクトを適切に整理できます。次のようなもの<div class="parent child grandchildren-1">は、この css によってのみ選択されます。

.parent.child.grandchildren-1 { color:red; }
于 2013-02-19T14:28:03.043 に答える