想必大家在用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( )标签回更好些。