html - CSS nth-child : every 4th, 第 11、18 等

Question

我有以下 div HTML 结构:

• 一个
• 一个
• 一个
• b
• b
• b
• b
• 一个
• 一个
• 一个
• b
• b
• b
• b

等等

所以，在 3 次 a 之后，是 4 次 b。我想用 css nth-child 选择器获取每个 B 元素。 我尝试了 nth-child:(4n + 3)，但这没有成功。 这应该可以用纯 css 实现，还是我必须使用 javascript。

我假设，如果这可以用 css 实现，我会声明 4 个 css-selectors。

谢谢!

Answer 1

您可以使用 li:nth-child(7n+4), li:nth-child(7n+5) ... 其中 li:nth-child(7n+4 ) 将匹配 4、11、18... 而 li:nth-child(7n+5) 将匹配 5、12、19 等

li:nth-child(7n+4), li:nth-child(7n+5), li:nth-child(7n+6), li:nth-child(7n+7) {
  font-weight: bold;
}

<ol><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li>
</ol>

您还可以使用 li:nth-child(7n), li:nth-child(7n-1) ...

li:nth-child(7n), li:nth-child(7n-1), li:nth-child(7n-2), li:nth-child(7n-3) {
  font-weight: bold;
}

<ol><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li>
</ol>