html - 在没有 jquery 的情况下为每第 4 个奇数/偶数 nth-child(2n) 设置样式

Question

当前场景

我想要什么

请参阅以下代码段进行编辑。希望这对您有所帮助。

ul {
    font-size: 0;
    width: 400px;
}
li {
    width: 100px;
    height: 100px;
    display: inline-block;
}
li:nth-child(odd) {
    background: yellow;
}
li:nth-child(even) {
    background: orange;
}

<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>

如果可能，我需要纯 CSS 解决方案。

Answer 1

本质上，您使用的是偏移量为 8 的重复组，因此您可以使用:

ul {
    font-size: 0;
    width: 400px;
}
li {
    width: 100px;
    height: 100px;
    display: inline-block;
    background: yellow;
}
li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) {
    background: orange;
}

<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>