CSS：选择每第二个孩子，但不是每第四个答案

【问题标题】：CSS: Select every 2nd child but not every 4thCSS：选择每第二个孩子，但不是每第四个
【发布时间】：2014-10-28 14:21:50
【问题描述】：

我需要选择元素的每个第二个子元素，但如果它是 4 的倍数（4、8、12...），则不应选择它。所以我想要的“序列”是 [2, 6, 10, 14]。

我目前的解决方案是：

p:nth-child(2n) {
  background: purple;
}
p:nth-child(4n) {
  background: white;
}

现在第 2、6、10 和 14 个元素具有紫色背景色。但这不是解决问题的好方法。

我可以以某种方式将这两个选择器组合成类似的东西

p:nth-child(2n \ 4n) { //Just an idea how this selector could work
  background: purple;
}

【问题讨论】：

不，你不能。你的解决方案很好。您可能想使用background: inherit，这样您就不必重复“白色”。

标签： css css-selectors frontend

【解决方案1】：

这应该适用于您的序列（[2, 6, 10, 14]。）：

   p:nth-child(4n-2) {
      background: purple;
    }

p:nth-child(4n-2) {
  background: purple;
  color: #FFF;
}

<p>Lorem ipsum 1</p>
<p>Lorem ipsum 2</p>
<p>Lorem ipsum 3</p>
<p>Lorem ipsum 4</p>
<p>Lorem ipsum 5</p>
<p>Lorem ipsum 6</p>
<p>Lorem ipsum 7</p>
<p>Lorem ipsum 8</p>
<p>Lorem ipsum 9</p>
<p>Lorem ipsum 10</p>
<p>Lorem ipsum 11 </p>
<p>Lorem ipsum 12</p>
<p>Lorem ipsum 13 </p>
<p>Lorem ipsum 14 </p>
<p>Lorem ipsum 15</p>
<p>Lorem ipsum 16</p>

【讨论】：

【解决方案2】：

这个怎么样：

p:nth-child(4n+2) {
  background: purple;
}

【讨论】：