深入理解 nth-child 和 nth-of-type 的区别
ele:nth-of-type(n) 为什么叫 of-type ,就是说它是以“type”来区分的，也就是说ele:nth-of-type(n)指的是父元素下第n个ele元素。
ele:nth-child(n) 指的是父元素下第n个元素且这个元素是ele，若没有，则选择失败。
举例：
<style> .div-parent span:nth-child(2){ color:red; } .div-parent span:nth-of-type(2){ color:yellow; } </style> <div class="div-parent"> <p>这是段落P</p> <span>这是span1</span> <span>这是span2</span> </div>
结果为：
这是段落P
这是span1 这是span2
说明：
span:nth-child(2) 选择的是所有子元素中的第二个元素，这个元素必须是span
span:nth-of-type(2) 选择的是所有的span子元素中的第二个元素。
如果在nth-child 和 nth-of-type前不指定标签呢？
举例：
<style> .div-parent :nth-child(2){ color:red; } .div-parent :nth-of-type(2){ color:yellow; } </style> <div class="div-parent"> <p>这是段落P1</p> <span>这是span1</span> <span>这是span2</span> <p>这是段落P2</p> </div>
结果为：
这是段落P1
这是span1 这是span2
这是段落P2
说明：
:nth-child(2) 不管是否指定标签，:nth-child(2)选择的都是第二个子元素，只不过如果指定了标签，那第二个元素就必须是该标签元素，否则选择失败。
:nth-of-type(2) 它选中了两个元素，分别是父级.div-parent 下第二个p标签和第二个span标签，说明，:nth-of-type(2) 选择的是各个子类型标签的第二个元素。
最后，我们了解一下，:nth-child(n) 和 :nth-of-type(n) 括号中的n代表什么?
说明：
上述选择器中的n，可以是数字，关键字和公式
① 数字：前面举例已经说明了， 1就是第一个 、2就是第二个
② 关键字： odd 和 even 匹配下标是奇数或偶数的子元素关键字，第一个子元素下标是1，那odd就是第1，3，5，7...个子元素
③ 公式：就是一种算数表达式，表示周期，n是从0开始计数
比如 2n，就是下标是2的倍数的子元素，其实就等同于even
比如n+2，就是下标不小于2的子元素，其实就是第2，3，4，5，6...个
特别说明下面这个例子：
<style> .div-parent .item:nth-of-type(2){ color:yellow; } </style> <div class="div-parent"> <p>这是段落P1</p> <span>这是span1</span> <span class="item">这是span2</span> </div>
结果：
这是段落P1
这是span1 这是span2
说明：
.item:nth-of-type(2) ，指的是span2，就等同于 span:nth-of-type(2)。而 .item:nth-of-type(1)是无效的，选择失败。因为span1，没有这个类.item
所以说，如果 :nth-of-type(2) 前指定的元素是类，选择的是指定类对应的标签下的第二个元素，且这个元素的类是指定类。
总结：
:nth-child(n) 父元素下第n个子元素
p:nth-child(n) 标签选择：父元素下第n个元素且这个元素是p标签
.div:nth-child(n) 类名选择: 父元素下第n个元素且这个元素包含类名‘div’。
:nth-of-type(n) 父元素下各个子类型标签的第n个元素
p:nth-of-type(n) 标签选择：父元素下第n个p标签。
.div:nth-of-type(n) 类名选择： 选择class="div"的所有不同类型的标签，对各个标签进行统计，分别选择第n个标签，且这第n个标签要包含类"div"，否则选择失败
