ホームページ > 記事 > ウェブフロントエンド > CSS3 疑似クラス セレクター nth-of-type と nth-child の使用法とそれらの違いを分析する
CSS3 疑似クラス セレクター nth-of-type と nth-child の使用法とそれらの違いを分析する
- yuliaオリジナル
- 2018-09-11 10:26:1011650ブラウズ
仕事では、CSS でセレクターを使用することがよくあります。セレクターには、ID セレクター、クラス セレクター、タグ セレクター、疑似クラス セレクターなど、さまざまな種類があります。そこで、今日は nth-child が何をするのかに焦点を当てます。擬似クラス セレクターの意味、nth-child の使用方法、および nth-of-type の違い これらは両方とも CSS3 の擬似クラス セレクターであり、多くの人が似た意味を持つと考えていますが、違います。次に、CSS3 の nth-of-type と nth-child の使用法とそれらの違いについて説明します。
1. nth-child( ) と nth-of-type( ) の定義と使用法
nth-child(n): 親要素内の n 番目の子要素と一致します 要素の型に制限はありません。 。
nth-of-type(n): 同じ型の n 番目の兄弟要素と一致します。
n には、数値、キーワード、または数式を指定できます。例: nth-child(奇数) 奇数、nth-child(even) 偶数。
nth-child と nth-of-type の違いは、要素の検索方法です。前者は兄弟要素間で絶対位置の要素を探すものであり、後者は同じ型の要素間で絶対位置の要素を探すものである。類似点は、どちらも要素を検索し、それを前のセレクターと照合する点です。ここでの照合方法は同じです。
少し下に拡張して、前のセレクターがどのように変化しても、最終的には要素が最初に検索され、その後、前のセレクターと一致するという検索方法を明確にします。これは、セレクターが検索方法とは何の関係もないことを意味します。さまざまな組み合わせで混乱しないように、この点を明確にしてください。
この定義を見ても、その違いがよくわからないかもしれません。次に、コードと図を通して少しずつ区別していきます。
2. nth-of-type と nth-child の違いを説明する例を示します
1. 最初の div に 5 つの P タグを与え、2 番目の div に 5 つの H5 タグを与えます。 nth-of-type(2)、結果が同じかどうかを確認します。それらはすべて 2 番目の色の変更です。
<style type="text/css">
p:nth-child(2){color: red ;}
h5:nth-of-type(2){color: blue;}
</style>
<body>
<div>
<p>星期一</p>
<p>星期二</p>
<p>星期三</p>
<p>星期四</p>
<p>星期五</p>
</div>
<div>
<h5>段落一</h5>
<h5>段落二</h5>
<h5>段落三</h5>
<h5>段落四</h5>
<h5>段落五</h5>
</div>
</body>レンダリング:
2. 次に、CSS スタイルは変更せずに、HTML コードにいくつかの変更を加えて、見た目を変えてみましょう。最初の p 要素と最初の h5 要素を h4 に変更しました。コードは次のとおりです。段落 3 の色が変わりました。 h5:nth-of-type(2) は、2 番目の h5 type 要素 (段落 3) を探しています。
3. HTML コードの変更を続けます。最初の p 要素と最初の h5 要素を復元し、2 番目の p 要素と 2 番目の h5 要素を h4 に変更すると、結果は変わりません。
<div> <h4>星期一</h4> <p>星期二</p> <p>星期三</p> <p>星期四</p> <p>星期五</p> </div> <div> <h4>段落一</h4> <h5>段落二</h5> <h5>段落三</h5> <h5>段落四</h5> <h5>段落五</h5> </div>
レンダリング: 
その結果、nth-child には効果がなく、nth-of-type が段落 3 を強調表示していることがわかります。
これはなぜですか？
Tuesday
を見つけ、後者の div は
Paragraph 2
を見つけます。見つかった後、前のセレクターと照合され、一致した場合にはスタイルが適用されます。前のセレクターは p で、要素が p 型である必要がありますが、ここではすべて h4 であり、一致せず、このスタイルは両方の要素に適用されません。nth-of-type は、同じ HTML タグ タイプを持つ多数の兄弟要素の中から 2 番目にランク付けされた要素を検索します。最初の div では、
Wednesday
は、p タイプの 2 番目の要素であり、後の div では、Paragraph 3
は、h5 タイプの 2 番目の要素です。 。 要素。見つかった後、前のセレクターと照合され、一致した場合にはスタイルが適用されます。前のセレクターは h5 なので、後の div のParagraph 3
要素のみにスタイルが適用されますが、前の div のTuesday
にはスタイルが適用されません。 要約: 上記では、nth-of-type と nth-child の違いを詳しく紹介しています。お役に立てれば幸いです。以上がCSS3 疑似クラス セレクター nth-of-type と nth-child の使用法とそれらの違いを分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。