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

Answer 2

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

Answer 3

.myTable {
  color: red;
}

.myTable table {
  color: initial;
}

更短，更好地使用级联，例如打算使用CSS ;-)

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