Question

我想为组提供替代的背景颜色，而不是元素的替代颜色。这意味着This li:nth-child(even)和li:nth-child(odd)对我不起作用。下面是我所做的代码。保持顺序（例如A，B，C，D ...）后，效果很好

在不维护序列（例如B，A，C，D）时会产生问题

这可以通过使用我要避免的JS将奇/偶类添加到备用组来解决。

是否有仅CSS解决方案？。

.wrapper div {
  display: inline-block;
  padding: 5px;
}

.a,
.c,
.e {
  background: #ddd
}

.b,
.d {
  background: #999
}

<h3>works fine when sequence is maintained as below</h3>
<div class="wrapper">
  <div class="a">A</div>
  <div class="a">A</div>
  <div class="a">A</div>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="d">D</div>
  <div class="d">D</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="e">E</div>
  <div class="e">E</div>
</div>
<h3>When sequence is not followed this is what happens.</h3>  
<div class="wrapper">
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="a">A</div>
  <div class="a">A</div>
  <div class="a">A</div>
  <div class="a">A</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="d">D</div>
  <div class="d">D</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="e">E</div>
  <div class="e">E</div>
</div>
<h3>Below is ths output needed if sequence is not followed.</h3>  
<div class="wrapper">
  <div class="a">B</div>
  <div class="a">B</div>
  <div class="a">B</div>
  <div class="b">A</div>
  <div class="b">A</div>
  <div class="b">A</div>
  <div class="b">A</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="d">D</div>
  <div class="d">D</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="e">E</div>
  <div class="e">E</div>
</div>

Answer 1

您只需更改HTML结构：

.wrapper div {
  display: inline-block;
  padding: 5px;
}
.group:nth-child(even) div {
  background: #ddd
}

.group:nth-child(odd) div {
  background: #999
}

<div class="wrapper">
  <div class="group group-b">
    <div class="b">B</div>
    <div class="b">B</div>
    <div class="b">B</div>
  </div>
  <div class="group group-a">
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
  </div>
  
  <div class="group group-c">
    <div class="c">C</div>
    <div class="c">C</div>
    <div class="c">C</div>
    <div class="c">C</div>
    <div class="c">C</div>
  </div>
  <div class="group group-d">
    <div class="d">D</div>
    <div class="d">D</div>
    <div class="d">D</div>
    <div class="d">D</div>
  </div>
  <div class="group group-e">
    <div class="e">E</div>
    <div class="e">E</div>
    <div class="e">E</div>
  </div>
  <div class="group group-a">
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
  </div>
  <div class="group group-b">
    <div class="b">B</div>
    <div class="b">B</div>
    <div class="b">B</div>
  </div>
  <div class="group group-c">
    <div class="c">C</div>
    <div class="c">C</div>
    <div class="c">C</div>
    <div class="c">C</div>
    <div class="c">C</div>
  </div>
  <div class="group group-d">
    <div class="d">D</div>
    <div class="d">D</div>
    <div class="d">D</div>
    <div class="d">D</div>
  </div>
</div>

Answer 2

.wrapper .a::nth-of-type(0){
background:#ccc;
}
.wrapper .a::nth-of-type(2){
background:#ddd;
}

奇数-偶数背景色分组

2 个答案: