王力言 發表於 2025-3-22 00:00:00

css子元素nth-child()的用法示例【css选择器】

<p>前言<br/></p><p>:nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关，公式通用。</p><p>一、列表中的偶数标签 :nth-child(2n)</p><pre class="brush:css;toolbar:false">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;偶数&nbsp;*/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li:nth-child(2n)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;skyblue;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</pre><p>二、列表中的奇数标签 :nth-child(2n+1)</p><pre class="brush:css;toolbar:false">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;奇数&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li:nth-child(2n+1)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;skyblue;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</pre><p>三、选择从第6个开始，直到最后 :nth-child(n+6)</p><pre class="brush:css;toolbar:false">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;选择从第6个开始，直到最后&nbsp;*/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li:nth-child(n+6)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;skyblue;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</pre><p>四、选择第1个到第6个 :nth-child(-n+6)</p><pre class="brush:css;toolbar:false">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;选择第1个到第6个&nbsp;&nbsp;*/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li:nth-child(-n+6)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;pink;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</pre><p>五、选择第6个到第9个</p><pre class="brush:css;toolbar:false">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;选择第3个到第6个&nbsp;&nbsp;*/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li:nth-child(n+3):nth-child(-n+6)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;pink;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</pre><p>&nbsp;六、补充 :nth-of-type(n)</p><p>:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，n 可以是数字、关键词或公式。</p><pre class="brush:css;toolbar:false">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;补充&nbsp;:nth-of-type(n)&nbsp;*/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li:nth-of-type(2n+1)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;violet;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</pre><p>七、从倒数第六个开始变色</p><pre class="brush:css;toolbar:false">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;倒数第六个开始变色&nbsp;*/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li:nth-last-child(-n+6)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;aqua;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</pre><p><br/></p><p><br/></p>
頁: [1]
查看完整版本: css子元素nth-child()的用法示例【css选择器】