CSS3のnth-childとnth-of-typeの違いを詳しく解説-CSSチュートリアル-php.cn

CSS3のnth-childとnth-of-typeの違いを詳しく解説

小云云

リリース： 2017-12-13 12:01:12

オリジナル

2048 人が閲覧しました

CSS3 における nth-child と nth-of-type の違いは、実際には非常に単純です。なぜ :nth-of-type は :nth-of-type と呼ばれるのでしょうか?それは「種類」で区別しているからです。つまり、ele:nth-of-type(n) は親要素の下の n 番目の ele 要素を指し、ele:nth-child(n) は親要素の下の n 番目の要素を指し、この要素は ele です。そうでない場合、選択は失敗します。

テキストはかなりわかりにくく聞こえるかもしれませんが、理解しやすいです。小さな例を次に示します。

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>demo</title>
</head>
<style>
.demo li:nth-child(2){
color: #ff0000;
}
.demo li:nth-of-type(2){
color: #00ff00;
}
</style>
<body>
<p>
<ulclass="demo">
<p>zero</p>
<li>one</li>
<li>two</li>
</ul>
</p>
</body>
</html>

ログイン後にコピー

結果は次のとおりです。

CSS3のnth-childとnth-of-typeの違いを詳しく解説

.demo li:nth-child(2) は

one

ノードを選択し、.demo li:nth-of-type(2) は

two

ノードを選択します。

しかし、nth-child と nth-of-type の前にタグが指定されていない場合はどうなるでしょうか?

.demo :nth-child(2){
color:#ff0000;
}
.demo :nth-of-type(2){
color:#00ff00;
}

ログイン後にコピー

結果はどうなるでしょうか? HTML 構造を見てください:

<ulclass="demo">
<p>first p</p>
<li>first li</li>
<li>second li</li>
<p>second p</p>
</ul>

ログイン後にコピー

結果:

CSS3のnth-childとnth-of-typeの違いを詳しく解説

上でわかるように、タグのタイプは指定されていません。その前に: nth-child(2) は、ラベルが何であっても 2 番目の要素を選択します。そして、:nth-type-of(2) は、parent.demo の 2 番目の p タグと 2 番目の li タグの 2 つの要素を選択します。タグのタイプが指定されていない場合、:nth-type -of が実行されることがわかります。 (2) は、すべてのタイプタグの 2 番目を選択します。

nth-child と nth-of-type の基本的な使い方と違いはすでに理解しました。それでは、nth-of-type(n) と nth-child(n) の n は何でしょうか?

nth-of-type(n) および nth-child(n) n には、数値、キーワード、または式を指定できます。数字: これは上記の例の使用法なので、詳細は説明しません。キーワード: 奇数、偶数

奇数と偶数は、添え字が奇数または偶数であるサブ要素と一致するために使用できるキーワードです

注: 最初のサブ要素の添え字は 1 です

ここでは、奇数と偶数ですp 要素は、2 つの異なる背景色を指定します:

p:nth-of-type(odd){background:#ff0000;}p:nth-of-type(even){background:#0000ff;}

ログイン後にコピー

式: または、式 (an + b) を使用した算術式

。説明: 期間の長さを示します。n はカウンタ (0 から始まります)、b はオフセット値です。

ここでは、添字が 3 の倍数であるすべての p 要素の背景色を指定します:

p:nth-of-type(3n+0){background:#ff0000;}

ログイン後にコピー

それが: nth-of-type(4n+2) の場合、添字が倍数であることを意味します4 に 2 のすべての要素を加えたもの。