CSS で nth-child 要素と nth-of-type 要素を見つける方法

今回はCSSでnth-child要素とnth-of-type要素を検索する方法を紹介します。 CSSでnth-child要素とnth-of-type要素を検索するときの注意点は何ですか？実際のケースを見てみましょう。

nth-child と nth-of-type は、CSS の 2 つの疑似セレクターです。アプリケーションでは、この 2 つが混同されることがよくあります。それらを取り出して注意深く比較し、要素がどのように見つけられるかを見てみましょう。

1. nth-child(n) - n 番目の子要素を検索します

2. nth-of-type(n) - 同じタイプの要素内の n 番目の要素を検索します

この定義では両者の違いがよくわからないので、少しずつ区別していきましょう。

p:nth-child(2) と p:nth-pf-type(2)

HTML コードは次のとおりです

<p>
<p style="float:left;width:200px;">
    <p>pgh1</p>
    <p>pgh2</p>
    <p>pgh3</p>
    <p>pgh4</p>
</p>
<p style="float:left;width:200px;">
    <h5>p1</h5>
    <h5>p2</h5>
    <h5>p3</h5>
    <h5>p4</h5>
</p>

2 つのスタイルをそれぞれ適用し、どちらも 2 番目の要素を探します

p:nth-child(2) {
    color: red;
    font-weight:bold;
}
h5:nth-of-type(2) {
    color: blue;
    font-weight:bold;
}

結果: 2 つすべてが正常に適用されました。

次に、HTML コードにいくつかの変更を加えて、見た目を変えてみましょう。最初の p 要素と最初の h5 要素を label に変更しました。コードは次のとおりです。

<p>
<p style="float:left;width:200px;">
    <label>pgh1</label>
    <p>pgh2</p>
    <p>pgh3</p>
    <p>pgh4</p>
</p>
<p style="float:left;width:200px;">
    <label>p1</label>
    <h5>p2</h5>
    <h5>p3</h5>
    <h5>p4</h5>
</p>

スタイルは変更されていません。効果を確認すると、nth-of-type(2) の結果が変更されていることがわかります。現在は p3 が強調表示されています。これは私たちのロジックと一致していると考えられます。 h5:nth-of-type(2) は、型 h5 の 2 番目の要素 (p3) を探しています。

HTMLコードの変更を続けます。最初の p 要素と最初の h5 要素を復元し、2 番目の p 要素と 2 番目の h5 要素を label に変更すると、結果は変わりません。

HTML は次のとおりです:

<p>
<p style="float:left;width:200px;">
    <p>pgh1</p>
    <label>pgh2</label>
    <p>pgh3</p>
    <p>pgh4</p>
</p>
<p style="float:left;width:200px;">
    <h5>p1</h5>
    <label>p2</label>
    <h5>p3</h5>
    <h5>p4</h5>
</p>

CSS は変更されません:

p:nth-child(2) {
    color: red;
    font-weight:bold;
}
h5:nth-of-type(2) {
    color: blue;
    font-weight:bold;
}

結果: nth-child は効果がなく、nth-of-type は p3 を強調表示します。

これはなぜですか?

1. nth-child は、2 番目にランクされている限り、その要素が何であっても、一連の兄弟要素の中から 2 番目の要素を検索します。ここで、左側の p は pgh2 を見つけ、右側の p は p2 を見つけます。見つかった後、前のセレクターと照合され、一致した場合にはスタイルが適用されます。前のセレクターは p で、これは要素が p 型である必要があることを意味しますが、ここではすべてラベルであるため、このスタイルは両方の要素に適用されません。

2. nth-of-type は、同じ HTML マークアップ タイプ (マークアップ タイプ) を持つ多数の兄弟要素の中で 2 番目にランク付けされた要素です。左側の p では、

   pgh3

   は、右側の p の 2 番目にランク付けされた要素です。 h5 要素。見つかった後、前のセレクターと照合され、一致した場合にはスタイルが適用されます。前のセレクターは h5 なので、右側の p の

   p3

   要素のみにスタイルが適用されますが、左側の p の

   pgh3

   には適用されません。

つまり、nth-child と nth-of-type の違いは要素の検索方法です。前者は兄弟要素間で絶対位置の要素を探すものであり、後者は同じ型の要素間で絶対位置の要素を探すものである。類似点は、どちらも要素を検索し、それを前のセレクターと照合する点です。ここでの照合方法は同じです。

少し下に拡張して、前のセレクターがどのように変化しても、最終的には要素が最初に検索され、その後、前のセレクターと一致するという検索方法を明確にします。これは、セレクターが検索方法とは何の関係もないことを意味します。さまざまな組み合わせで混乱しないように、この点を明確にしてください。

1. p:nth-child(2) 正解: 2 番目の要素を見つけます。この要素は p です。誤: 2 番目の要素

2. .info:nth-child(2) を検索します。 正:

   class に「info」が含まれる 2 番目の要素を検索します。エラー: 2 番目のクラスに「info」が含まれる要素を見つけてください。

3. p:nth-of-type(2) 同じ HTML タグ タイプの 2 番目の要素を見つけます。この要素は p です (または直感的には 2 番目の p タイプ要素を見つけます)

4. .info:nth-of-type(2) 同じHTMLタグタイプ内で2位の要素を検索し、この要素のクラスに「info」が含まれているものを探します

これを読んでメソッドをマスターしたと思いますこの記事の事例については、さらに興味深い内容については、php 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

h5 は複数の画像プレビューのアップロードとクリックしてドラッグするコントロールを実装します

CSS3 混合モードの使用の詳細な説明

以上がCSS で nth-child 要素と nth-of-type 要素を見つける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。