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

先看案例：

<ul class="demo">
   <p>pp>
   <li>oneli>
   <li>twoli>
   <div>divdiv>
 ul>

区别：
ele：nth-child: 选择的对象包含父元素下所有子元素ele， 如上 ul.demo 下的子元素包含 p,li,div;
ele：nth-of-type: type指的是类型，选择的对象包含父元素下所有的子元素ele，并且必须是ele；

注意：nth-child 和 nth-of-type 的下标是从1开始

举例：

.demo li:nth-child(2) { color: red; } /* 将选中 
one
 */
.demo li:nth-of-type(2) { color: green; } /* 将选中 
two
 */