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 位的子元素,并且只包含奇数位。