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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这个怎么样：

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

CSS：选择每个第二个孩子，但不是每隔4个孩子

2 个答案: