1、:nth-child(n)
匹配属于其父元素的第n个子元素，不论元素的类型。
n可以是数字、关键词或公式。
1) n为数字时，n为大于0的整数；
2) n为关键字时，odd表示偶数，等价于2n；even表示奇数，等价于2n + 1；
3) n为公式 时，如：n + 4表示大于等于4，-n + 5表示小于等于5，3n表示3的倍数，3n + 1表示隔二取一等。
2、:nth-of-type(n)
匹配属于其父元素的特定类型的第n个子元素的每个元素。
n可以是数字、关键词或公式。
3、:nth-child(n)和nth-child(n)的不同
nth-of-type(n)和nth-child(n)的用法类似，当其父元素的所有在其之前的子元素都是同类型时，nth-of-type(n)和nth-child(n)得到的结果没有差别。
然而，在其之前有其他类型的子元素时，nth-of-type(n)和nth-child(n)得到的结果是由差异的，nth-child(n)是在其父元素的所有子元素里面找第n个子元素，nth-of-type(n)是在其父元素的特定类型子元素里面找第n个该类型的子元素。
HTML：
<body>
<p>p</p>
<div>div1</div>
<div>div2</div>
</body>
CSS：
div:nth-of-type(2){
background-color:green;
}
div:nth-child(2){
background-color:yellow;
}
运行结果：
转载请注明原文地址: https://ju.6miu.com/read-669478.html
