css - 是否可以在 CSS 中选择每隔三个一组？

Question

是否可以在 CSS 中选择每隔三个一组？如果是的话；如何？

因此，在下面的示例中，将样式应用于 4-6 和 10-12 lis。

<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>
     <li>11</li>
     <li>12</li>
</ul>

我知道 [纯] JavaScript 和 jQuery 可以做到这一点，但我正在寻找纯 CSS 解决方案（如果存在）。

Answer 1

您正在寻找第 n 个孩子：

ul li:nth-child(6n+4),ul li:nth-child(6n+5),ul li:nth-child(6n+6) {
    background:red;
}

http://jsfiddle.net/bhlaird/utEP4/1/

Answer 2

您可以使用和的组合使用单个选择器来实现此目的。:not:nth-child

ul > li:not(:nth-child(6n+1)):not(:nth-child(6n+2)):not(:nth-child(6n+3))  {
    color:blue;
}

jsFiddle在这里

但是，考虑到您无法设置其他元素的样式，单独使用该选择器是毫无用处的。

ul > li:not(:nth-child(6n+4)):not(:nth-child(6n+5)):not(:nth-child(6n+6))  {
    color:red;
}

使用两者的组合将允许您对所有内容进行样式设置，请参阅演示。