对 table 的 odd/even 行进行不同的样式设置

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>

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

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

每偶数行使用：

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

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

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

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

完整编辑 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 中的 select 或，否则它只会 select tr 和那个 class，它们总是偶数在你的 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>

更新（基于操作评论）

Thank you for the reply, but my aim is to not style the rows containing "price value"

使用兄弟select或（+和~）然后

/* 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（基于操作评论）

Thanks for the updated answer. However this only appears to style the first row after the first "price-row" row. After that no other odd rows which have the class "price-row" are styled as odd, only even?

您可以像下面那样使用 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>

对 table 的 odd/even 行进行不同的样式设置

Styling odd/even rows of a table differently

html

css

css-selectors

pseudo-class