`:first-child` が私の H1 を選択しないのはなぜですか?

:first-child が期待される H1 を選択しない理由

提示されたシナリオの目標は、最初の h1 要素に色を付けることですクラスdetail_container blueのdiv内。使用される CSS (:first-child) は、ターゲット要素がその親の最初の子であることを前提としていますが、この場合、親の最初の子は ul​​ 要素です。

:first-child について

:first-child セレクターは、指定された条件に一致する、指定された親要素の最初の子要素を選択します。提供されたコードでは、条件は「h1」ですが、div の最初の子が ul であるため、:first-child セレクターは h1 要素に適用されません。

を使用した代替解決策:first-of-type

CSS3 では、要素タイプの最初の出現を選択する :first-of-type セレクターが導入されました。その親内で。このシナリオでは、:first-child を :first-of-type に置き換えることで問題が解決されます:

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

ブラウザの互換性に関する考慮事項

ただし、 :first- of-type は、:first-child に比べてブラウザの互換性が制限されています。

を使用した推奨解決策Class

より実用的でブラウザ間互換性のある解決策は、対象の h1 要素にクラスを割り当て、それに応じてスタイルを設定することです。

.detail_container h1.first {
  color: blue;
}

以上が`:first-child` が私の H1 を選択しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。