nth-child & nth-of-type

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

ABAAAB
B:nth-child(2n){some style}
此时序列中所有的B都将被选中

上面示例中,nth-child会在B的同级元素节点中寻找符合的元素

1. 类名或者标签为B
2. index为2n ,同级的所有类型的元素都参与排序

ABAAAB
B:nth-of-type(2n){some style}
此时序列中第二个B将被选中

nth-of-type选中规则

1. 类名或者标签为B
2. 在所有的类型B中选取index为2n的元素,其它类型的元素不参与排序

• 总结

nth-child和nth-of-type区别主要在与其它类型的元素是不是参与排序.
从字面意思也能理解.
nth-child是typeA:nth child of father,不分组在所有的元素里找nth元素再看这个元素是不是typeA.
nth-of-type是typeA:nth type(A) child of father,先把typeA元素单拎出来,然后在新的只有typeA的序列里选nth元素