有没有办法选择具有相同类名的表第一个表的子元素，然后选择第一个 td 元素？答案

【问题标题】：Is there a way to select a child element of table first table with same class name, then select the 1st td element?有没有办法选择具有相同类名的表第一个表的子元素，然后选择第一个 td 元素？
【发布时间】：2019-09-20 19:16:33
【问题描述】：

我正在尝试将样式应用于表格数据，但无法获得正确的元素，因为它们没有类或 ID。这些表具有相同的类名，并且我已经能够通过使用 table:nth-of-type(2) 来隔离正确的表。我只是不知道如何正确地将选择器串在一起以获得正确的元素。

我最近尝试过的是

div#esri_dijit_Legend_0_BuckQuery table:nth-of-type(2) > tbody > tr > td:first-child

下面是html的示意图


<table class="className">
    <tbody>
        <tr>
            <td>  Need to apply style to this element only
            <td>
        </tr>
    </tbody>
</table>
<table class="className">
    <tbody>
        <tr>
            <td>  Don't want this element
            <td>
        </tr>
    </tbody>
</table>



No errors, just nothing happens.The problem I am having is stringing together to two selectors correctly. I know there is a correct syntax for doing this.

Thanks

【问题讨论】：

什么都没有发生是什么意思？你的风格不适用于其中任何一个？看起来应该？是否还有其他具有不同类名的表？如果你想要第一个，为什么要使用table:nth-of-type(2)？见jsfiddle.net/mendesjuan/4Lbg9831这应该够了table:nth-of-type(1) td:first-child
需要更多说明您需要定位的元素。只是第一个 <td> 还是全部？
确实，这看起来应该可以工作，假设第一个 table.className 实际上是第二个表并且第一个没有显示。

标签： css css-selectors children

【解决方案1】：

<style>
   .className:first-of-type  tr:first-child td:first-child
   {
     background:red;
   }
</style>

<table class="className">
    <tbody>
        <tr>
            <td>  Need to apply style to this element only
            <td>
            <td> 
              There is no style on this element
            <td>
        </tr>
    </tbody>
</table>
<table class="className">
    <tbody>
        <tr>
            <td>  Don't want this element
            <td>
        </tr>
    </tbody>
</table>

【讨论】：