Question

如果我想从第5个位置开始选择每个第4个元素，我会这样做：

.elem:nth-child(4n+5) {
    //something
}

但是如何从第5点开始为每个奇数元素做到这一点？这种语法不起作用：

.elem:nth-child(:oddn+5) {
    //something
}

Answer 1

您可以使用.elem:nth-child(2n+5)

li:nth-child(2n+5) {
  color: red
}

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

2n将选择所有其他元素，而+5将作为偏移量。因此，n从零开始，你得到5,7,9,11 ......

Answer 2

您可以使用

:nth-child(odd)选择每个奇数元素
:not(:nth-child(-n + 4))不选择前4个元素

div:not(:nth-child(-n + 4)):nth-child(odd) {
  background: red;
}

<div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div>

或者，如果你想从第5个元素开始，你可以改为

div:not(:nth-child(-n + 5)):nth-child(even) {
  background: red;
}

<div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div>

从第5点开始选择每个奇数元素

2 个答案: