直接子项的备用表行颜色

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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;