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颜色。

Answer 2

tr:nth-child(1){background:red;}

http://jsfiddle.net/scott88/c6wq3La9/

Answer 3

.myTable {
  color: red;
}

.myTable table {
  color: initial;
}

更短并且更好地使用级联，就像使用CSS一样; - ）

实例：http://codepen.io/TheDutchCoder/pen/zxYRXO

CSS选择器仅设置表格内第一级td的样式

3 个答案: