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

違い: :first-child は親要素内の最初の子要素と一致し、これは構造内の最初の子要素と言えますが、 :first-of-type は同じタイプの子要素と一致します。親要素の下 最初のものは、このタイプの最初の要素である限り、最初の子要素に限定されなくなりました。

【推奨チュートリアル: CSS ビデオ チュートリアル】

最初 - CSS セレクターでchild と first-of-type の違い

#: first-child セレクター は css2 で定義されたセレクターであり、リテラルから理解するのは簡単です意味. これは最初の子要素であり、その親要素の最初の子要素と一致します。

たとえば、次のコードがあります:

p:first-child  匹配到的是p元素,因为p元素是p的第一个子元素；
h1:first-child  匹配不到任何元素，因为在这里h1是p的第二个子元素，而不是第一个；
span:first-child  匹配不到任何元素，因为在这里两个span元素都不是p的第一个子元素；

: first-of-type セレクターは css3 で定義されたセレクターであり、親一致する要素の特定の型の最初の子要素です。

これと :first-child の違いは何ですか?そのコード部分を見てみましょう:

p:first-of-type  匹配到的是p元素,因为p是p的所有类型为p的子元素中的第一个；
h1:first-of-type  匹配到的是h1元素，因为h1是p的所有类型为h1的子元素中的第一个；
span:first-of-type  匹配到的是第三个子元素span。这里p有两个为span的子元素，匹配到的是它们中的第一个。

したがって、上記の 2 つの例から次の結論を導き出すことができます:

:first-child 一致するのは、特定の親要素の最初の子要素であり、構造内の最初の子要素と言えます。

:first-of-type は、特定の親要素の下にある同じ型の最初の子要素と一致します。たとえば、p:first-of-type は、すべての型が p であることを意味します。その子要素の最初の要素。このタイプの最初の要素である限り、最初の子要素に制限はなくなりました。

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！

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