简单看懂nth-child与nth-of-type区别

1、:nth-child       当前父元素下面的所有的子元素

2、:nth-of-type    当前父元素下同类型的子元素

举例 01 ：【有 指定标签】

div p:nth-child(3) 是先选中了div下的第3个子元素，再判断是不是p，若不是，则选择失败（如上图所示， i 没有被选择，无效果 ）。

div p:nth-of-type(3) 是直接选中了div下的第3个 p 子元素（如上图所示）（直接跳过type类型不是p的子元素）。

【有 指定标签】简单总结 区别：

div p:nth-child(3)  : 先找第三个子元素，再看看是不是 p。

div p:nth-of-type(3)  : 直接找第三个 p。

举例 02 ：【无 指定标签】

div :nth-child(3) 是直接选中了div下的第3个子元素。（如上下图所示， i 被选中，才不管你是啥标签呢）。

div :nth-of-type(3) 是直接选中了div下的第3个 p 子元素 和 第3个 i 子元素 （如上下图所示）（选中所有类型标签的第三个）。

【无 指定标签】简单总结 区别：

div p:nth-child(3)  :  直接找第三个子元素。

div p:nth-of-type(3)  :  找全部类型的三个。

【小小拓展  供了解】

:nth-child(odd) ： odd是奇数的意思，表示奇数位的元素，如 1、3、5、7...
:nth-child(even) ： even是偶数的意思，表示偶数位的元素，如 2、4、6、8、10...

:nth-child(2n) ： 2n表示以2为倍数位的元素（等于even），如 2、4、6、8、10...

:nth-child(3n) ： 3n表示以3为倍数位的元素（类似于odd），如 3、6、9、12...

:nth-child(2n+1) ：（等于odd），如 1、3、5、7... 因为 (2*0+1=1) (2*1+1=3) (2*2+1=5)。

:nth-child(n+3) ： 从第三个开始（包含第三个），直到最后一个。

:nth-child(-n+3) ： 前三个（包含第三个）。

【小小拓展  供了解：伪元素选择器】

::before 在元素内部前插入内容

::after 在元素内部后插入内容

(1)  必须有content 

(2）属于行内元素

(3)  权重为1