CSS nth-child

前言

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;
}