Question

我有一个HTML结构，每行显示4个块和块＆＃39;背景颜色设置为CSS偶数和奇数（红色和绿色）。

是否可以在每个项目之后更改偶数和奇数偶数<偶数？

注意：我们无法更改HTML结构。

<ul>
  <li>bg color RED</li>
  <li>bg color Green</li>
  <li>bg color RED</li>
  <li>bg color Green</li>
  <li>bg color Green</li>
  <li>bg color RED</li>
  <li>bg color Green</li>
  <li>bg color RED</li>
  <li>bg color Green</li>
  <li>bg color RED</li>
  <li>bg color Green</li>
  <li>bg color RED</li>
</ul>

Answer 1

是否有可能将偶数和奇数改为甚至在每个第四项之后？

如果你的意思是对于前4个元素，奇数元素应该有红色背景，而偶数元素应该有绿色背景，并且它为每组4个元素交换，那么你可以使用nth-child选择器来做在下面的片段中。也可以使用nth-of-type来完成。

ul{
  padding:0;
  width:100%;
}
li{
  width:25%;
  height:50px;
  float:left;
  border:1px solid black;
  list-style:none;
  box-sizing: border-box;
}
li:nth-child(8n+1),li:nth-child(8n+3), li:nth-child(8n+6), li:nth-child(8n){
  background: red;
}
li:nth-child(8n+2),li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7){
  background: green;
}

<ul>
<li>bg color RED</li>
<li>bg color Green</li>
<li>bg color RED</li>
<li>bg color Green</li>
<li>bg color Green</li>
<li>bg color RED</li>
<li>bg color Green</li>
<li>bg color RED</li>
<li>bg color RED</li>
<li>bg color Green</li>
<li>bg color RED</li>
<li>bg color Green</li>
</ul>

或者，如果你的意思是说对于前四个元素，奇数元素应该有红色背景，而偶数元素有绿色背景，之后（即从第5个元素开始），奇数元素应该有绿色背景虽然偶数元素应该有红色背景，然后你可以像下面的片段一样。

ul {
  padding: 0;
  width: 100%;
}
li {
  width: 25%;
  height: 50px;
  float: left;
  border: 1px solid black;
  list-style: none;
  box-sizing: border-box;
}
li:nth-child(2), li:nth-child(4), li:nth-child(2n+5) {
  background: green;
}
li:nth-child(1), li:nth-child(3), li:nth-child(2n+6) {
  background: red;
}

<ul>
  <li>bg color RED</li>
  <li>bg color Green</li>
  <li>bg color RED</li>
  <li>bg color Green</li>
  <li>bg color Green</li>
  <li>bg color RED</li>
  <li>bg color Green</li>
  <li>bg color RED</li>
  <li>bg color Green</li>
  <li>bg color RED</li>
  <li>bg color Green</li>
  <li>bg color RED</li>
  <li>bg color Green</li>
  <li>bg color RED</li>
  <li>bg color Green</li>
  <li>bg color RED</li>  
</ul>

在每个第n个子项之后反转偶数奇数模式

1 个答案: