web前端学习笔记（18）之nth-child() 的别样用法

nth-child是一个经常使用的css3属性,本来以为基本用法都已经掌握了，直到前段时间一次面试被问到。

背景

面试官拿出他的笔记本现场叫我实现下面效果。 有下面一个 list, 请将 3 到 10 的数字设置为红色：

<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>
    <li>11</li>
    <li>12</li>
    <li>13</li>
</ul>
复制代码

本着一切从简，实现效果即可的想法，当时我给出下面的方法。

生产环境肯定不要写的这么简陋

var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
    if (i >= 3 && i <= 10) {
        lis[i].className = "color";
    }
}
li.color {
    color: red;
}
复制代码

虽然实现了要求的效果，但是好像并不是面试官想要的结果。然是面试官又让我用 纯 css 实现，不使用 js， 当时我知道要实现这样的效果应该会用的伪类 :nth-child()。
:nth-child(1); nth-child(2n + 1); nth-child(odd)等都是 nth-child()的常用用法，但是要实现 范围选择 , 之前我还真没有遇到过这样的需求。

下来查阅了下资料才知道原来这么简单。

li:nth-child(n + 3):nth-child(-n + 10) {
    color: red;
}
复制代码

下面做个简单的总结吧。

:nth-child(an + b)

说明：a 表示周期的长度，n 是计数（从 0 开始），b 是偏移值。

1. n直接选择

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

注意： n 是从 1 开始计算，即第一个元素是nth-child(1)而不是nth-child(0)

2. 奇/偶关键字

:nth-child(odd) 选中奇数位元素

:nth-child(even) 选中偶数位元素

3. 周期选择

• :nth-child(3n + 1) 选择 1, 4, 7, 10等元素

• 正向选择。 :nth-child(n + 7) 选中从第7个开始的子元素

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

4. 范围选择

• 前后限制范围。 :nth-child(n + 3):nth-child(-n + 10) 选中某一范围内子元素，该示例表示：选中第3 个到第 10 个所有子元素

• 范围选择高级用法。:nth-child(n + 3):nth-child(odd):nth-child(-n + 10) 我们将会选中从第 3 位到第 10 位的子元素，并且只包含奇数位。

转载于:https://juejin.im/post/5c1cb097e51d4570f14522de