使用 nth-child 或 nth-of-type 我想选择这种模式 -1,5,9,13,17,19..-

【问题标题】：Using nth-child or nth-of-type I want to select this pattern -1,5,9,13,17,19..-使用 nth-child 或 nth-of-type 我想选择这种模式 -1,5,9,13,17,19..-
【发布时间】：2019-03-14 05:14:13
【问题描述】：

我在父元素下的每一行有 4 张卡片，我想使用 nth-child 或 nth-of-type 在行的每个第二个元素上应用某些样式

0_1_2_3

4_5_6_7

8_9_10_11

12_13_14_15

【问题讨论】：

标签： css css-selectors css-position

【解决方案1】：

应该这样做。

li:nth-child(4n + 2)

4n 只是将数字插入的表达式：4(1) = 4th element、4(2) = 8th element 等。
+ 2 是从第二个子元素开始查询的常量。

li:nth-child(4n + 2) {
  background-color: lightgreen;
}

li { list-style: none; }

<ul>
  <li>item 0</li>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
</ul>

【讨论】：