我可以使用第N个子项跳过第一个项目，然后选择2跳过2吗

Question

我需要一个与此匹配的nht子规则：
◻ ◼ ◼ ◻ ◻ ◼ ◼ ◻ ◻ ◼ ◼ ◻

我在CSS Tricks第N个儿童测试仪上尝试了几个组合，但都没有成功

这可能吗？

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范围上的1st和4th。。。

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>