举例来说:
p:nth-child(2)
选择的是其父元素下的第二个子元素,且为p元素。此处关键的是一定选择的是其父元素下的第二个子元素,若刚好为p元素则可以选择,若不是p元素则不会选择上任何元素。p:nth-of-type(2)
选择的是其父元素下第二个p元素。注意此时选择的不一定是父元素的第几个子元素,但是一定是p元素中的第二个。
<section>
<div>我是一个普通的div标签</div>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
这里nth-child(2)会选择上第一个p标签,因为它是父元素的第二个子元素,且为p元素。
而nth-of-type(2) 则会选择上第二个p元素,正如我们希望的。