当前场景
我想要什么
请参阅以下代码段进行编辑。希望这对您有所帮助。
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 解决方案。
最佳答案
本质上,您使用的是偏移量为 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>
关于html - 在没有 jquery 的情况下为每第 4 个奇数/偶数 nth-child(2n) 设置样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29421679/