理清nth-child()与nth-of-type()括号内是实数时到底选的是哪个。

想必大家在用nth-child()时都遇到过这种问题，就是明明选中了那个并且给了他CSS样式，但它却未作出更改，这就是因为你还没完全理解nth-child()的用法。

****  打个比方   .content ul li:nth-child(2){样式内容....}     指的是：找到 li 的父元素 ul 下面的第2个标签（其他非li标签也会算一个标签），并且第2个标签要是 li 标签才会使用你刚刚设置的css样式。

******      .content ul li:nth-of-type(2){ 样式内容....}           指的是：找到 li 的父元素 ul 下面的第2个 li 标签（先扫描一遍 ul 下面的所有标签，找到所有为 li 的标签，里面的第2个 li 标签），并给他使用你刚刚设置的css样式。

下面我会举几个例子让你完全理解他们的用法。

 左上方是HTML文件，左下方是其CSS文件，右边是浏览器运行结果。当我解释掉前面两个非 li 标签时，.content ul li:nth-child(2)使用正常，给2添加了红色背景。

 当我放开第一个 span 标签时，刷新浏览器，发现现在并没有在我们想要的2中加上红色背景，反而是在1上加了红色背景，这是因为 span 也算了一个标签，所以<li>1</li>就变成了第2个标签并且应用到了css样式。

 当我 span 标签和 p 标签都放开不解释时，浏览器中就没有一行是红色背景了，这是因为第2个标签是 p 标签，非 li 标签，所以他并不会应用你所设置的样式。

下面来解释一下****   nth-of-type()   ****

 我将刚刚css样式中的nth-child(2)改为nth-of-type(2),并且不解释前面两个 span 标签和 p 标签。我们发现浏览器中在2上添加了红色背景，他直接忽视了前面两个非 li 标签，直接定位到第二个 li 标签并给它应用了css样式。

 我把nth-of-type(2)改为nth-of-type(4),他还是如我们所愿，找到了第四个 li 标签并且给其应用了css样式，添加了红色背景，并没有被其他非 li 标签所影响。

总的来说，使用nth-of-type( )不容易搞混淆，不会被其他杂乱标签所影响，直接在你所想要设置样式的标签里面挑选。而nth-child( )更容易被你穿插在里面的其他标签所影响，导致你想要应用的样式用错。一般情况下我还是觉得使用nth-of-type( )标签回更好些。