我可以使用Nth-child跳过第一项然后选择2跳过2吗？

Question

我需要一个与此相符的nh-child规则:
◻◼◼◻◻◼◼◻◻◼◼◻

我在CSS-Tricks Nth-child-tester上尝试了几个组合,但没有任何效果.

这甚至可能吗？

Answer 1

我不知道有任何单一规则的方法,但你可以始终只使用相同的规则定位两个单独的模式:

:nth-child(4n+2),
:nth-child(4n+3) {
    background: black;
}

Answer 2

这个让我头疼,但我想出了如何在一个规则中做到这一点!

你必须使用:not()选择器,因为它可以顺序放置,所以element:not(:nth-child(4n + 1)):not(:nth-child(4n + 4))可以做到这一点.

换句话说,它是选择所有,除了每个4n范围的第1和第4 ......

li:not(:nth-child(4n + 1)):not(:nth-child(4n + 4)) {
    color: red;
}

<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>