CSS の `:first-child` セレクターと `:first-of-type` セレクターの違いは何ですか?

:first-child と :first-of-type の微妙な区別

:first-child と :first のニュアンスを理解する-of-type は CSS スタイル設定において極めて重要です。似たようなセレクターにもかかわらず、これら 2 つは異なる結果をもたらします。

親子関係: 詳細を見る

親要素内のすべての要素は複数の子要素を持つことができます。 。これらの子供たちの中で、第一子であることを主張できるのは1人だけです。この排他的な特性は、:first-child:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

:first-of-type

の力によって捉えられます。ここで、:first-child は、 first の子、:first-of-type にはより具体的な目的があります。子としての配置に関係なく、特定の型の最初の要素を対象とします。問題の型が div:

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

であるシナリオを考えてみましょう。この例では、:first-child と :first-of-type は両方とも最初の子であるため、同じ要素を識別します。部ただし、h1 要素を最初の子として導入すると、次のようになります。

<div class="parent">
  <h1>Child</h1> <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

h1 は、その最初の子のステータスにより、:first-child 要件を満たします。ただし、それは最初の div ではなくなりました。その結果、最初の div は div の :first-of-type 一致になります。

Key Takeaway

:first-child は最初の子を特定しますが、 :first- of-type は、子としての位置に関係なく、特定の型の最初の要素を見つけます。この区別は、誕生順序と固有のタイプの両方に基づいて特定の要素をターゲットにする場合に重要です。

以上がCSS の `:first-child` セレクターと `:first-of-type` セレクターの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。