CSS nth-child：每 4 日、11 日、18 日等

Question

我有以下 div HTML-structure:

一个
一个
一个
b
b
b
b
一个
一个
一个
b
b
b
b

等等

所以，在 3 次 a 之后，是 4 次 b。我想用 css nth-child 选择器抓取每个 B-element。我尝试了 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>

Answer 2

@NenadVracar 的回答是正确的，但这里有一个替代方法 adjacent sibling selector:

li:nth-child(7n+4),
li:nth-child(7n+4) + li,
li:nth-child(7n+4) + li + li,
li:nth-child(7n+4) + li + li + li {
  color: red;
}

<ul>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
</ul>

CSS nth-child：每 4 日、11 日、18 日等

CSS nth-child: every 4th, 11th, 18th etc

html

css

children

css-selectors