:first-child セレクターが h1 要素で機能しないのはなぜですか?

:first-child セレクターが目的の要素を選択しない

クラス名を持つ div 内の最初の h1 要素を選択しようとしたとき「detail_container」と表示された場合、一部のユーザーは予期しない動作に遭遇する可能性があります。 h1 要素が div の直接の最初の子ではない場合、意図した CSS ルール「.detail_container h1:first-child」は失敗します。

この問題は、:first-child セレクターが最初の要素に適用されるために発生します。親要素の直接の子。提供された例では、h1 要素が ul リストの後に続き、detail_container div の最初の子は h1 ではなく ul です。その結果、:first-child セレクターは h1 と一致しません。

これに対処するには、代わりに :first-of-type セレクターの使用を検討してください。このセレクターは、直接の最初の子であるかどうかに関係なく、親内の指定された型の最初の要素と一致します。次の CSS ルールは、div 内の最初の h1 要素を選択します:

.detail_container h1:first-of-type {
    color: blue;
}

ただし、ブラウザーの互換性制限のため、最初の h1 要素には指定されたクラスを使用し、代わりにそのクラスをターゲットにすることをお勧めします。

.detail_container h1.first {
    color: blue;
}

以上が:first-child セレクターが h1 要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。