CSS选择器:nth-child()的灵活用法及常见场景示例

CSS选择器中的nth-child()相信大家都比较熟悉，nth-child()和nth-of-type()的区别是：nth-child()不区分类型。大家经常使用的大多都是其常规的一两种用法，在遇到一些稍微复杂点的需求，比如，选择从第A个到第B个子元素时，很多前端开发者往往束手无策。今天我们就整理下nth-child()的一些使用场景，供大家扩展学习。

以下示例，为方便演示，我们将所有子元素的默认背景设为淡灰色，将选中的子元素设为淡珊瑚色背景（未被选中的子元素为淡灰色背景）。因为nth-child()选择器不区分类型，所以这里我们使用ul列表标签来进行演示。

HTML代码：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

提示：可以使用ul>li*10快速生成该段代码。

默认CSS样式代码如下：

ul{
    margin: 20px;
    li{
        width: 30px; height: 30px;line-height: 30px;
        margin: 5px; float: left;
        list-style: none; text-align: center;
        border: 1px solid gray; background: lightgray;
    }
}

场景一：选择所有偶数/奇数位置的子元素

CSS样式代码：

ul li:nth-child(2n){ border: 1px solid coral; background: lightcoral;}

效果如下：

li:nth-child(2n)为选择偶数个子元素，那么则可以通过li:nth-child(2n+1)来选择第奇数个子元素；

当然，我们还可以通过关键词：even和odd来实现选择第奇数个或者偶数个子元素的效果，如：

li:nth-child(even){ border: 1px solid coral; background: lightcoral;}

场景二：选择所有X的倍数的子元素

选取位置为3的倍数的子元素，如第3、6、9个子元素。

CSS样式代码：

li:nth-child(3n){ border: 1px solid coral; background: lightcoral;}

场景三：选择从第4个子元素往后的所有元素

CSS样式代码：    

li:nth-child(n+5){ border: 1px solid coral; background: lightcoral;}

效果如下：

场景四：选择第8个子元素前的所有元素

CSS代码：

li:nth-child(-n+8){ border: 1px solid coral; background: lightcoral;}

效果如下：

当然：选择第8个元素之前的所有子元素，等同于对选择第八个子元素之后的所有元素取反。该效果也可通过如下代码实现：

li:not(:nth-child(n+9)){ border: 1px solid coral; background: lightcoral;}

场景五：三四结合使用，选择从第4个到第8个子元素

CSS代码：

li:nth-child(n+5):nth-child(-n+8){ border: 1px solid coral; background: lightcoral;}

效果如下：

场景六：对场景五取反，即选择除从第5到第8个子元素之外的其他子元素

CSS代码：

li:not(:nth-child(n+5):nth-child(-n+8)){ border: 1px solid coral; background: lightcoral;}

效果如下：

通过nth-child()选择器，我们还可以实现很多其他使用场景较为小众的一些效果，希望大家扩展学习，在学习的过程中，举一反三。