css中 nth-child 和 nth-of-type 的区别

用一个很简单的例子，一看就能很好地记住了：

HTML:
<ul class=”demo”>
<li>zero</li>
<li>one</li>
<li>two</li>
</ul>

CSS:
.demo li:nth-child(2) {
color: red;
}
.demo li:nth-of-type(2) {
color: green;
}

结果如下：

简单总结如下：

nth-child(n)从父元素下面的第一个子元素开始数起，而nth-of-type(n)只数指定的那个子元素。如果父元素下面都是同一种类型的子元素，或者要选择的子元素是从第一个开始排起，则这两个选择器的效果一样。