选择中的:nth-child(n)和:nth-of-type(n)的区别，哪位比较了解，进来看一下。谢谢
w3c官方是这样解释的：
:nth-child(n)
例 p:nth-child(2)
选择属于其父元素的第二个子元素的每个<p>元素。
:nth-of-type(n)
例 p:nth-of-type(2)
选择属于其父元素第二个<p>元素的每个<p>元素。我这边有这样一段代码：
<ul class="clearfix">
<li></li>
<li class="nav_after"></li>
<li></li>
<li class="nav_after"></li>
<li></li>
<li class="nav_after"></li>
<li></li>
<li class="nav_after"></li>
</ul>我的目的是对class是nav_after的最后一个要做处理时（li的数量我这边是固定的），我想到了用选择器然后用nth-child，css如下：
.seckill_title .seckill_nav .nav_after:nth-child(4) {
background-color: pink;
}结果是所有li中的第4个变了css效果，当我用nth-child用单数（比如1、3）时，却都没有变化。不是很清楚原因。
然后我想着先解决问题，就又找了一个，nth-of-type，我读了w3c的官方解释，感觉是我要的选择器，使用之后的效果，同上。
写回答
-
IT从业.nav_after:nth-child(4)的意思是：.nav_after的父元素（这里就是ul）的第四个子元素如果是.nav_after的时候适用。
题主的代码中，第四个子元素恰好含有类名.nav_after，所以设置背景有效；当你写成单数时，由于单数的li并没有设置.nav_after类名，所以没有效果。
nth-of-type适用于：当子元素的类型超过一种的时候，针对同类型的子元素计算。如下代码，div包含h2型子元素和p型子元素：
<div> <h2>h元素</h2> <p class="nav_after">p元素</p> <h2>h元素</h2> <p class="nav_after">p元素</p> <h2>h元素</h2> <p class="nav_after">p元素</p> <h2>h元素</h2> <p class="nav_after">p元素</p> </div>.nav_after:nth-of-type(4)就表示第四个p。
如果把h2也都加上类名.nav_after，那么.nav_after:nth-of-type(4)就表示第四个h2和第四个p了。
.nav_after:nth-child(4)表示父元素的第四个子元素，不分类型，如果第四个子元素含有类名.nav_after就有效，不含就没效。题主的代码，ul的子元素只有一种类型li，所以此时
nth-of-type(4)和nth-child(4)都指向第四个子元素li了。2019-07-17 19:28:48赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
