0

私は、次のように単純化できる例を使用してプロジェクトに取り組んでいます。CSS で使用されている手法の名前を何と呼びますか?

<html>
    <head>
        <style type="text/css">
        #numberone #numbertwo #numberthree
        {
            color: red;
        }
        </style>
    </head>
    <body>
        <div id="numberone">
            <div id="numbertwo">
                <div id="numberthree">
                    This is red
                </div>
            </div>
        </div>
        <div id="numberthree">
            This is not red
        </div>
    </body>
</html>
4

1 に答える 1

4

特定の祖先構造を持つ要素を対象とする子孫コンビネータの使用について言及していると思います。仕様から：

子孫コンビネータは、単純なセレクターの 2 つのシーケンスを区切る空白です。「A B」という形式のセレクターは、祖先要素 A の任意の子孫である要素 B を表します。

ID 値はドキュメント内で一意でなければならないため、ID セレクターではなくクラス セレクターを使用するように CSS を変更します。この例では、 class nameを持つ要素の子孫である class nameをnumberthree持つ要素の子孫である class name を持つ要素を選択します。numbertwonumberone

.numberone .numbertwo .numberthree {
    color: red;
}

この例numberthreeでは、先祖に関係なく、クラス名を持つすべての要素を選択します。

.numberthree {
    color: red;
}

したがって、マークアップの例 (クラスを使用するように変更されています) を考えると、次のことが適用されます。

<div class="numberone">
    <div class="numbertwo">
        <div class="numberthree">
            This is red for both snippets above
        </div>
    </div>
</div>
<div class="numberthree">
    This is only red for the second snippet above
</div>
于 2012-07-02T09:00:01.027 に答える