Question

我需要一个符合此要求的nht-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 范围内的第一和第四外，它正在选择全部...

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>

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

2 个答案: