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

本文主要是介绍nth-child 和 nth-of-type 的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先看案例：

<ul class="demo"><p>p</p><li>one</li><li>two</li><div>div</div></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; } /* 将选中 <li>one</li> */
.demo li:nth-of-type(2) { color: green; } /* 将选中 <li>two</li> */

这篇关于nth-child 和 nth-of-type 的区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---