入れ子になった要素で `:first-child` が最初の `` を選択できないのはなぜですか? それを修正するにはどうすればよいですか?-CSSチュートリアル-php.cn

入れ子になった要素で `:first-child` が最初の `` を選択できないのはなぜですか? それを修正するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-09 10:12:08

オリジナル

1029 人が閲覧しました

Why Does `:first-child` Fail to Select the First `` in Nested Elements, and How Can I Fix It?

:first-child 特定のケースで予期された要素と一致しない

クラスの div 内の最初の h1 要素を選択しようとしたとき「detail_container」、:first-child セレクターが意図したとおりに動作しない可能性があります。これは、次の例のように、h1 が div の直接の子ではない場合に発生します。

<style type="text/css">
.detail_container h1:first-child {
  color: blue;
} 
</style>
<body>
<div class="detail_container">
  <ul>
    <li></li>
    <li></li>
  </ul>
  <h1>First H1</h1>
  <h1>Second H1</h1>
</div>
</body>

ログイン後にコピー

この場合、ul 要素が次のとおりであるため、:first-child セレクターは最初の h1 を選択できません。 h1 ではなく、div の最初の子です。

解決方法

を発行して、div 内の位置に関係なく最初の h1 要素を選択するには、利用可能な代替 CSS セレクターがあります:

1。 :first-of-type

:first-of-type セレクターは、指定された要素タイプに一致する親の最初の子を選択します。この場合、次のように div の最初の子 h1 が選択されます:

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

ログイン後にコピー

2.クラスベースの選択

もう 1 つのアプローチは、最初の h1 に「first」などの一意のクラスを与え、CSS でそのクラスをターゲットにすることです。

.detail_container h1.first {
  color: blue;
}

ログイン後にコピー

これこの方法により、選択に対する柔軟性と制御が向上します。

以上が入れ子になった要素で `:first-child` が最初の `` を選択できないのはなぜですか? それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。