以不同方式对表格的奇数/偶数行进行样式设置[重复]

Question

我有以下 HTML：

<table id="price-table">
            <tr><th>Price</th><th>Value</th></tr>
            <tr class="price-row">
                <td>0</td>
                <td>1</td>
            </tr>

            <tr><th>Price</th><th>Value</th></tr>
            <tr class="price-row">
                <td>1</td>
                <td>2</td>
            </tr>
</table>

我正在尝试使用以下方法为每个奇数行设置价格行的样式：

#price-table tr.price-row:nth-child(odd) {
    color: green;
}

每个偶数行使用：

#price-table tr.price-row:nth-child(even) {
    color: blue;
}

但是，只有偶数行被设置样式，奇数行被完全忽略。我不明白这是为什么？第一行的 id 不是 1 会被设置为奇数，第二行的 id 不是 2 会被设置为偶数吗？

我应该提一下，我确实希望此表可以扩展，以便能够添加更多行并正确设置样式。

非常困惑，我不知道还能尝试什么，这似乎并不复杂，除非我犯了一个非常愚蠢的错误。

编辑完整的 HTML：

<table id="price-table">
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>0</td>
    <td>1</td>
  </tr>
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>1</td>
    <td>2</td>
  </tr>
   <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>0</td>
    <td>1</td>
  </tr>
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>1</td>
    <td>2</td>
  </tr>
</table>

Answer 1

您需要删除tr 中的选择器，否则它只会选择具有该类的tr，它们总是在您的HTML 结构中

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

tr:nth-child(even) {
  background-color: blue;
}

<table id="price-table">
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>0</td>
    <td>1</td>
  </tr>
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>1</td>
    <td>2</td>
  </tr>
</table>

更新（基于操作评论）

感谢您的回复，但我的目标是不对包含“价格值”的行设置样式

然后使用兄弟选择器（+ 和 ~）

/* this will select every .price-row that has a TR as immediate previous sibling*/

tr+.price-row {
  background-color: green;
}


/*this will select every .price-row after the other .price-row */

.price-row~.price-row {
  background: blue
}

<table id="price-table">
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>0</td>
    <td>1</td>
  </tr>
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>1</td>
    <td>2</td>
  </tr>
</table>

---

UPDATE2（基于操作评论）

感谢您更新的答案。然而，这似乎只在第一个“价格行”行之后的第一行设置样式。之后，没有其他具有“price-row”类的奇数行被设置为奇数，只有偶数？

您可以使用nth-child()，如下所示

tr:nth-child(2n+2) {
  background: red
}


tr:nth-child(4n+2) {
  background: blue
}

<table id="price-table">
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>0</td>
    <td>1</td>
  </tr>
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>0</td>
    <td>1</td>
  </tr>
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>1</td>
    <td>2</td>
  </tr>
<tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>1</td>
    <td>2</td>
  </tr>
</table>