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>
使用在线编辑器，请参考原文：
CSS :nth-child选择器到底怎么用，实例详解 – CSS教程
参数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>
