:nth-child(n)

定义

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，不论元素的类型。

注意：n 可以是数字、关键词或公式。

语法

:nth-child(number)
{
    CSS 样式
}

实例

基础n

:nth-child(n)：选中某个元素，该元素必须是某个父元素下的第n个子元素；

p:nth-child(n) ：选中p元素，且该p元素必须是某个父元素下的第n个子元素

注意：n是从1开始的。

如下代码：

p:nth-child(1)

只会选中第二个div中第一个子元素p，例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>
    <style>
        p:nth-child(1)
        {
            color:green;
        }
    </style>
</head>
<body>
   <div style="border:1px solid;width: 222px">
       <span>div1 中span</span>
       <p>div1 中第一个段落。</p>
       <p>div1 中的最后一个段落。</p>
   </div><br>
   <div style="border:1px solid;width: 222px">
       <p>div2 中第一个段落。</p>
       <p>div2 中的最后一个段落。</p>
   </div>
</body>
</html>

div1 中span

div1 中第一个段落。

div1 中的最后一个段落。

div2 中第一个段落。

div2 中的最后一个段落。

不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素。

正方向范围

li:nth-child(n+6)

选中从第6个开始的子元素

负方向范围

:nth-child(-n+9)

选中从第1个到第9个子元素。使用 :nth-child(-n+9) ，就相当让你选中第9个和其之前的所有子元素

前后限制范围

:nth-child(n+4):nth-child(-n+8)

选中第4-8个子元素。使用 nth-child(n+4):nth-child(-n+8) 我们可以选中某一范围内子元素，上面的例子里是从第4个到第8个子元素

奇数、偶数位

/*奇数*/
:nth-child(odd)

/*偶数*/
:nth-child(even)

高级玩法

隔选择子元素

:nth-child(3n+1),

选择1,4,7,10

范围法

nth-child(n+2):nth-child(odd):nth-child(-n+9)

使用 nth-child(n+2):nth-child(odd):nth-child(-n+9) ，将会选中的子元素是从第2位到第9位，并且只包含奇数位。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari	Chrome	FireFox	IE
1.0	1.0	1.0	5.0