ネストされた CSS セレクターで最初の子要素以外のすべてのスタイルを設定するにはどうすればよいですか?

ネストされたセレクターの操作: not:first-child の使用

CSS では、ネストされた構造内の特定の要素を選択するのが難しい場合があります。グループ内の最初の要素を除くすべての要素にスタイルを適用する必要があるシナリオに遭遇した場合、not:first-child セレクターが機能します。

あなたが試みた 1 つのアプローチ、div ul:not:first-子供、残念ながら機能しません。これは、not:first-child セレクターが引数として単純なセレクターを予期しているためです。つまり、このコンテキストでは div ul が無効です。

not:first-child セレクターの正しい構文は次のとおりです。

div ul:not(:first-child) {
    background-color: #900;
}

このセレクターは、親 div の最初の子ではないすべての ul 要素をターゲットとします。

ただし、レガシーの場合ブラウザのサポートや :not セレクターの制限を回避するには、別の手法を使用できます。

1. 意図したよりも広い範囲のルールを定義し、すべての要素に目的のスタイルを割り当てます。
2. 範囲が狭い、より具体的なルールを作成します。
3. 狭いルールでは、特定の条件を満たす要素のスタイル プロパティをデフォルト値にリセットします。

たとえば、このコード スニペットでは、すべての ul 要素に背景色を適用しますが、2 番目のルールは最初の子要素のスタイルをオーバーライドします。

div ul {
    background-color: #900;
}

div ul:first-child {
    background-color: transparent;
}

not:first-child セレクターまたは代替手法を使用すると、最初の子に影響を与えることなく、ネストされた要素を効果的にターゲットにしてスタイル設定できます。

以上がネストされた CSS セレクターで最初の子要素以外のすべてのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。