是否可以选择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

你在找第九个孩子：

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 here

但是，考虑到您不能为其他元素设置样式，使用该选择器本身是非常无用的。

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

see the demo，将两者结合使用将允许您对任何事情进行样式化。