CSS :nth-child选择器到底怎么用，实例详解

:nth-child选择器

刚接触到CSS的:nth-child伪类选择器的时候，也是晕头转向的，搞不清楚“:nth-child(n) 选择器选择的是其父元素中的第 n 个子元素,而且元素没有类型限制”这句话是什么意思。后来，经过资料的搜寻和不断的实例尝试，终于有些思路和头绪了，今分享于此，仅为个人理解，仅供参考。

---

语法

A:nth-child( n ){样式设置}

提示：其中参数n可以是数字、关键字odd和even，也可以是公式。

该选择器选择的是A选择器选择的元素的父元素中的第n个子元素，而且在匹配的阶段并没有元素类型的限制，但是，到了样式设置的阶段，却又有了元素类型的限制，比如p:nth-child(n)匹配p元素的父元素中的第n个元素，如果第n个元素刚好是p，则进行样式设置，如果不是p，比如是h2，则不会进行相关的样式设置。具体见下方的实例代码。

---

:nth-child选择器实例代码，及在线编辑器

<div>
  <p class='e1'>这是div下的第一个子元素</p>
  <p class='e1'>这是第二个子元素</p>
  <h5 class='e1'>第三个子元素，为元素h5</h5>
  <p class='e1'>第四个</p>
  <p class='e1'>这是第五个，为元素p</p>
  <h5 class='e1'>这是第六个，也是h5</h5>
</div>
<style>
  .e1:nth-child(1){color:orange;}
  .e1:nth-child(2){color:green;}
  h5:nth-child(3){color:blue;}
  h5:nth-child(5){color:skyblue;} /*该选择器选择的是第五个p元素，但并没有对其进行样式设置*/
  h5:nth-child(6){color:pink;}
</style>

试一试

参数n为关键字odd和even

:nth-child(n)选择器中的n为odd表示匹配排序为奇数的子元素，even表示匹配排序为偶数的子元素，如下实例代码：

<div>
  <p class='e2'>1</p>
  <p class='e2'>2</p>
  <p class='e2'>3</p>
  <p class='e2'>4</p> 
  <p class='e2'>5</p>
</div>
<style>
  .e2:nth-child(odd){color:blue;}
  .e2:nth-child(even){color:skyblue;}
</style>

试一试

参数n为公式

:nth-child(n)中的n的值也可以是公式的形式，比如2n将匹配偶数，2n+1将匹配奇数，实例代码如下：

<div>
  <p class='e3'>python</p>
  <p class='e3'>CSS</p>
  <p class='e3'>HTML</p>
  <p class='e3'>JS</p> 
  <p class='e3'>go</p>
</div>
<style>
  .e3:nth-child(2n){color:blue;}
  .e3:nth-child(2n+1){color:skyblue;}
</style>

试一试