さまざまな構造内で最初に出現する特定のクラス要素を選択するにはどうすればよいですか?

特定のクラス要素の最初の出現の選択

構造と要素が異なる場合、特定のクラス要素の最初の出現を選択するのは難しい場合があります。親要素内のカウントは異なります。この場合、ID またはクラス 'B' の要素内でクラス 'A' の最初の要素を選択しようとしているときに問題が発生します。

CSS3 による課題の克服

CSS3 は、兄弟の中で特定の型の最初の要素をターゲットとする :first-of-type 疑似クラスを提供します。ただし、同等の :first-of-class 擬似クラスはありません。

回避策

回避策として、一般的な兄弟コンビネータ (~ ) を適用し、.C 要素内のすべての .A 要素に適用された元のスタイルを「元に戻す」ルールを適用します。

CSS コード

次の CSS コード

.C > * > .A {
    /* Style every .A that's a grandchild of .C */
}

.C > * > .A ~ .A {
    /* Override styles only for .A elements following the first .A child */
}

このコードは、.C の孫であるすべての .A 要素にスタイルを適用します。さらに、.C.

例の図

以下の HTML 構造を考慮してください。 :

<div class="C">
    <div class="B">
        <div class="A">Content</div>
        <div class="A">Content</div>
    </div>
</div>

このシナリオ:

• 最初の .A 要素は、最初のルールによって適用されるスタイルを受け取ります。
• 2 番目の .A 要素、最初のルールに続いて、2 番目のルールによって適用されるオーバーライドされたスタイルを受け取ります。

ブラウザの互換性

~ セレクターは IE7 以降で認識されます。は、このソリューションが広くサポートされていることを意味します。この問題が発生する唯一の主要なブラウザは IE6 です。

この回避策を実装することで、開発者は、親要素内の構造や要素数が異なる場合でも、最初に出現する特定のクラス要素を選択的にターゲットにしてスタイル設定することができます。

以上がさまざまな構造内で最初に出現する特定のクラス要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。