CSS:选择每第二个 child 而不是每第四个

Question

我需要选择一个元素的每个第二个子元素，但如果它是 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;
}

Answer 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>