css里子代选择器:nth-child和:nth-of-type之间的差异

对于:nth-child（2）选择器，在简单白话文中，意味着选择一个元素：

1、这是个段落元素

2、这是父标签的第二个孩子元素

例如：p:nth-child(2) { color: red; }        

  

p:nth-child(2)其渲染的结果不是第二个p标签文字变红，而是第一个p标签，也就是父标签的第二个子元素。

对于:nth-of-type（2）选择器，意味着选择一个元素：

1、选择父标签的第二个段落子元素

例如：p:nth-of-type(2) { color: red; }

 

 p:nth-of-type(2)的表现显得很坚挺，其把希望渲染的第二个p标签染红了。

注解：在子代中，如果有多种标签，如含有p标签，i标签，div标签，最好使用nth-of-type（），因为这样可以选中的一定是某种标签的第几个；而使用nth-child（）就是选中的第几个儿子，不分是哪种标签。