CSS3 疑似クラスセレクター nth-of-type と nth-child の使用法とそれらの違いを分析する-CSSチュートリアル-php.cn

段落一

段落二

段落三

段落四

段落五

星期一

Tuesday

Paragraph 3

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3 疑似クラスセレクター nth-of-type と nth-child の使用法とそれらの違いを分析する

Sep 11, 2018 am 10:26 AM

仕事では、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 id="段落一">段落一</h5>
   <h5 id="段落二">段落二</h5>
   <h5 id="段落三">段落三</h5>
   <h5 id="段落四">段落四</h5>
   <h5 id="段落五">段落五</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 id="星期一">星期一</h4>
   <p>星期二</p>
   <p>星期三</p>
   <p>星期四</p>
   <p>星期五</p>
  </div>
  <div>
   <h4 id="段落一">段落一</h4>
   <h5 id="段落二">段落二</h5>
   <h5 id="段落三">段落三</h5>
   <h5 id="段落四">段落四</h5>
   <h5 id="段落五">段落五</h5>   
  </div>