CSS で複数の親にわたって特定の nth 子をスタイルする方法

複数の親にわたる特定の n 番目の子のスタイル設定

n 番目の子セレクターを使用してネストされた要素をスタイル設定する場合、セレクター単一の親コンテキスト内で動作します。これにより、複数の親にまたがる特定の子要素をターゲットにする場合に問題が発生する可能性があります。

問題:

次のマークアップを考慮してください:

<div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
    <ul>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

目標は、.foo 内の最初と 3 番目の li 要素のスタイルを設定することです。次の CSS を使用します:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color: red;
}

nth-child は各 ul の最初と 3 番目の子を選択するため、このアプローチは機能しません。

解決策:

CSS だけを使用すると、複数の親にわたる n 番目の子をターゲットにすることはできません。ただし、別の解決策もあります。

• JavaScript: jQuery などのライブラリを使用すると、DOM 要素を簡単に操作し、$('.foo li:eq( など) の特定の要素を選択できます。 0), .foo li:eq(2)').
• Explicit Markup: 次のように、最初と 3 番目の li 要素にクラスまたは ID を明示的に追加します。 >

次に、新しく追加したクラスを使用してスタイルを設定します:

<div class="foo">
    <ul>
        <li class="first">one</li>
        <li>two</li>
    </ul>
    <ul>
        <li class="third">three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

以上がCSS で複数の親にわたって特定の nth 子をスタイルする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。