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

Question

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

所以在下面的示例中，将样式应用于 4-6 和 10-12 li。

<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 个 child :

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/