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。我尝试过与＆gt;的不同组合和+，但没有运气。有人有什么想法吗？

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

Answer 1

您需要的选择器是

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

在那里有一个隐含的TBODY元素，即使你在代码中没有它。

Answer 2

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

＆gt;表示作为表的直接子项的tr

Answer 3

对于当今普通网站而言，速度并不是真正的问题，但值得注意。

标签的查找速度比类慢，而且查找类的速度比id慢。

因此，为了简单和速度，如何只为有问题的元素分配一个id并将一个样式应用于id？

Answer 4

这项工作对我来说：

table.myClass > tbody:first-of-type > tr > td:first-child

Answer 5

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

第一栏。

Answer 6

table.myTable＆gt; tr：第一个孩子＆gt; TD：第一胎

此代码很难支持。请尝试以下方法：

<table class="myTable">
   <tr>
      <td class="verySpecialCell">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>

甚至

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

Answer 7

table.table td：nth-child（1）{text-align：center;字体粗细：粗体；}

Answer 8

以下代码可以为您提供帮助，

HTML代码：

<table id="myTableId" class="myTableClass">
    <tr>
        <th>S.No</th>
        <th>Name</th>
    </tr>
</table>

CSS代码：

使用表格ID：

table[id="myTableId"] > tr:first-child > th:first-child{
}

使用表类：

table[class="myTableClass"] > tr:first-child > th:first-child{
}

或

table.myTableClass > tr:first-child > th:first-child{
}

或

table.myTableClass tr:first-child > th:first-child{
}

CSS选择表的第一行的第一列（不包括嵌套表）

8 个答案: