CSS3 : nth-child 和 nth-of-type 傻傻分不清

之前使用CSS的时候一直使用的是nth-child，今天重新学习了下，发现还有个nth-of-type，用起来不是那么顺畅，主要是对这两个选择器还是不太理解，今天就来彻底搞明白这两个选择器到底有什么区别。

E:nth-child（n）

匹配一个E元素，且该元素是其父元素的第n个子元素

<div>
	<h3>热点文章</h3>
	<ul id="news">
		<li>1、This is a Rabbit!</li>
                <p>我是P元素</p>
		<li>2、There are two Rabbits!</li>
		<li>3、哟呵！又来一个！</li>
		<li>4、计数君，快来！</li>
		<li>5、醉了醉了</li>
		<li>6、没人了吧！</li>
	</ul>
</div>

使用 li:nth-child(2)设置样式，会发现没有元素起作用，因为没有这么一个“是其父元素的第二个子元素”的li元素，ul的第二个子元素是p

E:nth-of-type（n）

匹配一个E元素，且该元素是其父元素的第n个E元素

使用 li:nth-of-type(2)设置样式，会发现“2、There are two Rabbits!”被成功设置样式 ！