526互联

nth-child 和 nth-of-type 的区别

发布时间 2023-06-20 11:45:49作者: 有只小菜猫

二者都是从父元素的子元素中匹配，或者说从同级兄弟元素中匹配，区别是主要是匹配规则不同；

  • element:nth-child（n）

    • 选中父元素的第几个子元素 , 计数时与元素的类型无关

    • 是先根据 n 匹配规则，在此基础上匹配 element；

    • 首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序

  • element:nth-of-type(n)

    • 是结构伪类选择器和nth-child类似，但是计数时只计算同种类型的元素

    • 是先匹配 element，然后从匹配的结果中根据 n 匹配

    • 针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。