css3结构性伪类

nth-child和nth-of-type这两个伪类的区别

例如下题：

图片发自App

理解了这两个伪类的区别之后这个题就很简单了

以题中的结构举例说明：

图片发自App

如果我们要选择二个p标签，那么其选择器应该是 p:nth-child(3){}，因为第二个p标点是box里面的第三个子元素，并且正好是p标签所以能选中，

那如果要选择h2标签呢？

p:nth-child(1)明显就不行

因为第一个元素是h2标签  必须写成h2:nth-child(1){}

E:nth-child(n)  表示E父元素中的第n个子元素( 这个子元素必须是E )

再来看nth-of-type

E:nth-of-type(n)  表示E父元素中的第n个E元素

举例说明，同样还是选择第二个p标签

图片发自App

那么这时候我们就可以这么写p:nth-of-type(2){}

这样就能选中第二个p标签了

注意  是第二个p标签而不是第二个子元素！！划重点！