浅谈:nth-child和:nth-of-type

来源：互联网发布：ubuntu 17.04 lts 编辑：程序博客网时间：2024/05/16 07:02

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;}

运行结果：

1 0