html - CSS 选择器仅对表格内 td 的第一级进行样式设置

Question

我有一个 <table>在另一个里面，我需要将 <td> 的第一层颜色设置为红色的唯一。

.myTable tr td {
  color: red;
}

<table class="myTable">
  <tr>
    <td>Red, please</td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>No red, thanks</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

我试过了

.myTable > tr > td {
  color: red;
}

但是，没有什么变红了。

我做错了什么？
因为我不能包含 jQuery 或任何其他外部库，所以我需要一个 CSS 的解决方案。

提前致谢。

Answer 1

.myTable > tbody > tr > td {
  color: red;
}
td > table {
    color: initial;
}

<table class="myTable">
  <tr>
    <td>Red, please</td>
  </tr>
  <tr>
    <td><table><tr><td>No red, thanks</td></tr></table></td>
  </tr>
</table>

即使您没有在 HTML 中包含 tbody 元素，它也会在 DOM 中自动创建，因此您需要将其包含在选择器中。

您需要额外的 td > table 选择器来关闭内部表格中的颜色。否则，它将继承它所在的 td 的颜色。