CSS3 :nth-child(n) 構文説明_html/css_WEB-ITnose

構文:

E:nth-child(n){ sRules }

* 親要素インデックスが n である子要素 E と一致します

:nth-child(n) を使用すると、親の任意の子と一致できますelement 要素:

Figure 1:<section id="demo">	<h1>选取ul第一个子元素li</h1>	<ul>		<li>如果我是红色，说明你的选择到了我，浏览器还颇为先进</li>		<li>落后的浏览器</li>		<li>落后的浏览器</li>		<li>落后的浏览器...#demo li:nth-child(1){	color:#f00;}

* lte IE8 ブラウザを除き、最初の li が一致し、テキストが赤色になっていることがわかります

キーポイント: 一致するのは親要素の子要素です:

Figure 2:<section id="demo">	<h1>选取#demo第一个子元素p</h1>	<p>如果你以为我会被选中变红，那你就猜错了</p>	<p>落后的浏览器</p>	<p>落后的浏览器</p>	<p>落后的浏览器...#demo p:nth-child(1){	color:#f00;}

* アピールコードは最初の p 要素が一致するように感じますか？本当にそう思っているなら、それは間違いです。ここの要素は一致しません

Figure 3:#demo p:nth-child(2){	color:#f00;}

* 図 #2 の CSS 疑似クラス #demo p:nth-child(1) を #demo p:nth に変更します。 -child(2) 最初の p が選択されて赤くなっていることがわかります。なぜですか? 急いで、以下を見てみましょう

* 図 #3 を変更しましょう #demo p:nth-child(2) を #demo :nth-child(2) に変更し、セレクターから p タグを削除すると、最初の p も選択され、赤色に変わることがわかります。最初の p が #demo の 2 番目の子要素であるため、これは通常の考え方と一致しているようです。つまり、この DEMO #demo p:nth-child(2) および #demo :nth-child; ( 2) は同等です

* これを理解するのは難しいと思いますか? CSS セレクターは右から左にクエリされます。これはすでにご存知かと思います。

E:nth-child(n) は、親要素の 2 番目の子要素と一致することを意味します。2 番目の子要素が E である場合、それが一致します。

* 図 # で要素が選択されていない理由がわかりました。 ２、もうおわかりですね。 #demo の最初の子要素は p ではなく h1 であるため、このセレクターは無効です

* および図 #3 セレクター #demo p:nth-child(2) は、#demo の 2 番目の子要素 ​​p と一致することを意味します。今回は #demo の 2 番目の子要素が p であるため、一致します

* 図 #2 と図 #3 と比較すると、この例の #demo は 2 番目の子要素を直接選択することを意味します。 #demo のサブ要素。このサブ要素がタグであるかどうかに関係なく、一致します。