前言
nth-child
伪类选择器非常地好用,所以必须得掌握它,能够为我们简化不少的 CSS 代码。比如选择前 n 行元素、选择后 n 行元素、选择奇偶行元素、选择 n 倍元素等。其语法本文不说,请看 MDN:nth-child - CSS。
在使用时一直记住,n 代表 0,1,2,3,...
的序列。现在有 10 个 p 标签:
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
选择奇数行元素
选择 1、3、5 的元素,即奇数行的元素:
p:nth-child(2n + 1) {
color: red;
}
或者可以直接通过单词 odd
代表奇数:
p:nth-child(odd) {
color: red;
}
选择偶数行元素
选择 2、4、6 的元素,即偶数行的元素:
p:nth-child(2n) {
color: red;
}
或者可以直接通过单词 even
代表偶数:
p:nth-child(even) {
color: red;
}
修改起始值和间距
选择 3、6、9,也就是说,起始的元素不是从 0 开始,而是从 3 开始。所以是 3n + 3
或者 3n
,序列元素之间的差是 3:
p:nth-child(3n + 3) {
color: red;
}
接下来,修改除 3、6、9 以外的 p 元素的 color。直接结合 :not
选择器,CSS 是可以选择器套选择器的:
p:not(:nth-child(3n)) {
color: red;
}