说明

:nth-child(n) 伪类选择器，根据索引选中元素

提示：n 可以是数字、关键词 或公式

数字

选中在父元素中，排在第 n 位的标签

注意： n 是 从1开始 的

例子：:nth-child(3) 选中父元素的第 3 个子元素

下面的HTML中，选中第 3 个 div 元素，设置该元素的文字颜色是 red

<style>
    /* 选中 div 的第3个元素 */
    div:nth-child(3){
        color: red;
    }
</style>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>

解释：在 body 标签中，第3个子元素是 <div>3</div>，而且是 div，所以设置其显示为红色

子元素的计数包括 任何元素类型 的子元素；但是只有当该 子元素位置 与选择器匹配时，才生效

<style>
    p:nth-child(2){
        color: red;
    }
</style>

<div class="box">
    <p>李雷</p>

    <p>韩梅梅</p>
</div>
<div>--------------------</div>
<p>lucy</p>

<p>lili</p>

运行结果：

解释：

如果不想出现该情况，可以使用 :nth-of-type() 选择器

选中索引是偶数的元素，并设置背景色

<style>
    .box :nth-child(even){
        background-color: hotpink;
    }
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

选中前3个元素，并设置背景色

<style>
    .box :nth-child(-n + 3){
        background-color: hotpink;
    }
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

解释： 表达式 -n + 3 计算过程如下（ n 从0开始）：

所以，选中前 3 个元素