css选择器nth-child和nth-of-type区别（学不会来打我）

css选择器nth-child和nth-of-type区别（学不会来打我）

区分nth-child和nth-of-type只需要记住：
nth-child：先根据位置找到元素，再看该元素的选择器是否符合
nth-of-type：先找出符合选择器的所有元素，将它们根据不同的标签进行分类，再选中每个分类中位置符合的元素

---

举例

对于相同的html结构（如下），我们对比 ul .son:nth-child(1) 和 ul .son:nth-type-of(1) 两种不同的选择方式，分析其选中情况：

<ul>
    <li class='son'>li.son</li>
    <p class='son'>p.son</p>
</ul>

选择器 ul .son:nth-child(1) 就意味着：先找到ul标签下的第1个元素，再看该元素是否满足.son

li标签是符合条件的，而p标签不符合，因为p标签不是ul下的第1个元素

<ul>
    <li class='son'>li.son</li> <!-- 选中 -->
    <p class='son'>p.son</p>    <!-- 未选中 -->
</ul>

而选择器 ul .son:nth-type-of(1) 意味着：先找到ul下所有满足.son的元素，将他们根据不同的标签进行分类，再选中每个分类中的第1个元素

li和p都会被选中。值得注意的是p标签虽然不是ul下的第1个元素，但是它在ul下所有p标签中是排第1的，因此也会被选中（虽然不是总分第一，但是是科目第一）

<ul>
    <li class='son'>li.son</li> <!-- 选中 -->
    <p class='son'>p.son</p> <!-- 选中 -->
</ul>