html - 直接 child 的备用表行颜色

Question

我想用不同的颜色为表格的行着色，所以我正在使用它

table#news tr:nth-child(even) {      
  background-color: red;
}
table#news tr:nth-child(odd) {
  background-color: green;
}

这种结构效果很好

<table id="news">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>

但现在我使用的是这种表格。

<table id="news">
  <tr>
    <td>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
    </td>
  </tr>
</table>

该样式也适用于行内的行。

我怎样才能继续为 <tr> 的第一级应用替代颜色？ ？

Answer 1

试试这个:

table#news > tr:nth-child(even) {      
  background-color: red;
}
table#news > tr:nth-child(odd) {
  background-color: green;
}

> 表示它是 #news 必须是 tr 的直接父级。

为了使其工作，您还必须添加 tbody 选择器。

table#news tbody > tr:nth-child(even) {      
  background-color: red;
}
table#news tbody > tr:nth-child(odd) {
  background-color: green;
}

tbody 元素由浏览器自动添加。

无论如何，上面的仍然行不通，因为您不能将tr 嵌套在td 中。您需要做的是在 td 中创建一个全新的表。看到这个:Html table tr inside td

运行下面的代码片段并查看源代码。

table.news > tbody > tr:nth-child(even) {
  background-color: red;
}
table.news > tbody > tr:nth-child(odd) {
  background-color: green;
}

<table class="news">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
</table>

<table class="news">
  <tr>
    <td>
      Test
      <tr>
        <td>Row 1</td>
      </tr>
      <tr>
        <td>Row 2</td>
      </tr>
      <tr>
        <td>Row 3</td>
      </tr>
    </td>
  </tr>
</table>

<h1> Fixed </h1>

<table class="news">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
</table>

<table class="news">
  <tr>
    <td>
      Test
      <table>
        <tr>
          <td>Row 1</td>
        </tr>
        <tr>
          <td>Row 2</td>
        </tr>
        <tr>
          <td>Row 3</td>
        </tr>
      </table>
    </td>
  </tr>
</table>