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选择器。

谢谢！

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等

2 个答案: