具有特定TR类

Question

如何在具有特定类tr的表中交替显示行的颜色？

在我下面的示例表中，我希望在绿色阴影和不同橙色阴影之间的行之间切换行。

我尝试了各种CSS选择器无济于事 我想避免在jQuery中这样做。

＆＃13;

＆＃13;

th {
  height: 30px;
}

tr.green:nth-child(even) {
  background-color: #f1f8e9;
}

tr.green:nth-child(odd) {
  background-color: #f1f8e9;
}

tr.orange:nth-child(even) {
  background-color: #fff8e1;
}

tr.orange:nth-child(odd) {
  background-color: #ffecb3;
}

＆＃13;

<table data-vertable="ver2">
  <thead>
    <tr>
      <th>no class</th>
    </tr>
  </thead>
  <tbody>
    <tr class="green">
      <th>green</th>
    </tr>
    <tr class="green">
      <th>green</th>
    </tr>
    <tr class="orange">
      <th>orange</th>
    </tr>
    <tr class="orange">
      <th>orange</th>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

我正在谈论的那种交替的例子：

Answer 1

首先.green是tr类，所以你不应该像.green tr那样写，但你可以简单地跟.green一起改变nth }选择器到nth-child。查看代码段了解详情

.green:nth-child(2n+1) {
  background-color: red;
}
.green:nth-child(2n) {
  background-color: blue;
}
.orange:nth-child(2n) {
  background-color: green;
}
.orange:nth-child(2n+1) {
  background-color: yellow;
}

<table data-vertable="ver2">
     <thead>
          <tr>
               <th></th>
          </tr>
     </thead>
     <tbody>
          <tr class="green">
               <th>hello</th>
          </tr>
          <tr class="green">
               <th>text</th>
          </tr>
          <tr class="orange">
               <th>random</th>
          </tr>
          <tr class="orange">
               <th>value</th>
          </tr>
     </tbody>

希望这有帮助