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

最近没什么工作，研究一下css3还是值得的

关于css中nth-child和:nth-type-of的使用貌似好像两个对于同一个功能实现起来差不多，查了一下书，还是有一定用法上的区别：

:nth-child可以选择父元素下的字元素，:nth-of-type也可以。

ele:nth-of-type(n)是指父元素下第n个ele元素， 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。所以貌似前者更加精确一些，但是看了很多代码发现用后者的占据很大部分

代码如下

<div>
<ul class="demo">
<p>zero</p>
<li>one</li>
<li>two</li>
</ul>
</div>

.demo li:nth-child(2)选择的是<li>one</li>节点，而.demo li:nth-of-type(2)则选择的是<li>two</li>节点。

来源：oschina

链接：https://my.oschina.net/u/2328177/blog/417054