CSS3_html/css_WEB-ITnose の :first-child と :first-of-child の違い

多くの高度なセレクターが CSS に追加されており、要素を簡単に見つけて、見つかった要素のスタイルを設定できるようになります。その中で、:first-child と :first-of-child は 1 単語だけ異なるようですが、ただし、それらには異なる使用法と意味が​​あります。今日の記事では、first-child と :first-of-child の 2 つのセレクターの違いについて説明します。

HTML コード

参加して、次の HTML コードを用意してください:

<div>    <p>第1个元素</p>    <h1>第2个元素</h1>    <span>第3个元素</span>    <span>第4个元素</span></div>

CSS セレクター

次の定義メソッド

p:first-child を使用すると、p 要素は次のようになります。 p 要素は div の最初の子要素であるため、一致する必要があります。ここで、h1 は div の最初の子要素ではなく 2 番目の子要素であるため、span:first-child はどの要素にも一致しません。ここのspan要素はどちらもdivの最初の子要素ではないため、 element 、ここでのdivの最初の子要素はpであるため、 :first-child はp要素と一致します。

上記で適用されたスタイルのうち 2 つは一致できませんが、CSS では :first-of-child 疑似クラスも定義されています。その使用法と説明を参照してください。

p:first-of-type 一致するもの。 p 要素は、div 内の p のすべてのサブ要素の最初であるため、実際には、h1:first-of-type が h1 要素に一致するサブ要素は 1 つだけです。 div 内の h1 のすべての子要素の最初のもの。実際、h1 の子要素は 1 つだけです。span:first-of-type は 3 番目の子要素の span に一致します。ここで、div にはspans である 2 つの子要素があり、最初の要素が一致します。 :first-of-type は p 要素と一致します。

概要

:first-child は、親要素の最初の子要素と一致します。これは、構造内の最初の子要素と言えます。 :first-of-type は、型の最初の要素と一致します。その型は、コロンの前で一致するものを指します。たとえば、p:first-of-type は、すべての p 要素の最初の要素を指します。もちろん、これらの要素のスコープはすべて同じレベル、つまりピアに属している限り、最初の子要素に制限はありません。

同じ型のセレクター: last-child と :last-of-type、:nth-child(n) と :nth-of-type(n) もこの方法で理解できます。

この記事は、Wenshuo.com によって公開され、Wenshuo.com によって編集されることを著者の Wenshuo.com によって許可されています。転載する場合は、この記事への出典とリンクを明記してください。