CSS选择表的第一行的第一列(不包括嵌套表)

Question

我对CSS选择器有困难,我希望有人可以帮助我.

我有一些看起来像这样的HTML:

<table class=myTable>
   <tr>
      <td>this is the td of interest</td>
   </tr>
   <tr>
      <td>
         <table>
            <tr><td>I don't want this td!</td></tr>
         </table>
      </td>
   </tr>
</table>

我正在尝试将背景图像应用到FIRST tr的第一个td.所以我尝试了以下方法:

table.myTable tr:first-child td:first-child {
    background-image: url(someUrl.gif);
}

但这也是找到嵌套表的第一个tr的第一个td.我尝试过使用>和+的不同组合,但没有运气.有人有主意吗？

注意:我的目标是提供与IE7 +兼容的解决方案.

Answer 1

你需要的选择器是

table.myTable > tbody > tr:first-child > td:first-child

在那里有一个隐式的TBODY元素,即使你在代码中没有它.

Answer 2

table.myTable > tr:first-child > td:first-child

> 表示作为 table 的直接子项的 tr