之前使用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!”被成功设置样式 !