在列表中定位 CSS 中的 2 个元素

Question

在 20 个元素的 ul/li 中，如何从列表中的第 2 个元素开始定位 4 个元素中的 2 个并发元素（1 / 2+3 / 4 / 5 / 6+7 / 8 / 9 / 10+11 等).

我尝试使用 :nth-child 规则，但我做不到。我找不到具有不同值的规则。

问候。 吉恩

Answer 1

您可以简单地组合两个 CSS 选择器来完成此操作。逗号分隔的 CSS 选择器将分别与规则块匹配。

li {
  border: 1px solid black;
  padding: 1rem;
}

li:nth-child(4n+2), li:nth-child(4n+3) {
  background-color: #ffcccc;
}

<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>