选择器 :nth-child()和nth-of-type()区别

区别：

p:nth-child(n) 表示其父元素的第n个子元素是否是p, 如果是，则有匹配元素，否则无匹配元素
p:nth-of-type(n) 表示其父元素的第n个子元素p

事例

<style>
	div p:nth-child(5) {
		background: pink; //不生效，没有匹配元素，因为div的第5个子元素不是p,是h1
	}
	div P:nth-of-type(5) {
		background: pink; //生效的的是 <p>我是五哥</p> 这一行
	}
</style>
<div>
	<span>我是标题</span>
	<p>我是大哥</p>
	<p>我是二哥</p>
	<p>我是三哥</p>
	<h1>小红花</h1>
	<p>我是四哥</p>
	<span>愿你天天开心</span>
	<p>我是五哥</p>
	<p>我是六哥</p>
	<p>我是七哥</p>
	<p>我是八哥</p>
</div>