我如何 select 每隔 child 和相邻的 child？

Question

Image attached for desired result

我想 select 顺序为 2,3，然后是 6,7，然后是 10 Image attached for desired result。那么我如何 select 这些与 nth-child 或其他东西？它会像这样...

(1)(2) (3)(4) (5)(6) (7)(8) (9)(10)

Answer 1

您可以通过 :nth-child 使用两个公式解决此问题，一个用于偶数，一个用于偶数。这是我建议的一个工作示例：

<style>
    li:nth-child(4n - 2), li:nth-child(4n - 1) { color: red; }
</style>
<ul>
    <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>

4n 部分提供了您要查找的“每隔 even/odd”部分：它将 select 每 4 个项目一个。 -1 和 -2 偏移此间隔以匹配您想要的数字。使用偏移量 +1 和 0

时，您可能会得到相反的行为（select 1、4、5、8、9 等）

我如何 select 每隔 child 和相邻的 child？

How do I select every other even child and adjacent child?

html

css

css-selectors