在CSS中的tr中选择特定的td

Question

我有一张这样的表

<table class="MainTable">
    <tr>
        <td>xxxx</td>
        <td>yyy</td>
        <tr>
            <th>AAAAA</th>
            <td>yyy</td>
            <td>ZZZZ</td>
        </tr>
</table>

我想在tr中选择第二个td。 当我使用CSS样式                 .MainTable tr td：nth-​​child（2）

它适用于第一个tr，但对于第二个tr，它选择第二个td。 我想用一个共同的公式选择第二个tr中的第三个td。

Answer 1

因此，只需选择第二个td中的第三个tr：

.MainTable tr:nth-child(2) td:nth-child(3) {
    background-color:red;
}

你错过了你的HTML：

<table class="MainTable">
    <tr>
        <td>xxxx</td>
        <td>yyy</td>
    </tr>
    <tr>
        <th>AAAAA</th>
        <td>yyy</td>
        <td>ZZZZ</td>
    </tr>
</table>

Answer 2

正如其他人所提到的，您的表结构存在严重问题。表格必须包含一个或多个<tbody>子项，<tr>不能包含其他<tr>个（除非包含在内部表格中）。

如果我找到你的话，你想在每一行中选择第二个td，即你想在计算第二行时忽略<th>哪个是＆＃34;第二个td＆＃34;。这可以使用:nth-of-type()代替:nth-child()来实现，因为前者在计算其索引时仅考虑相同类型的元素。

请注意，只有IE9及更高版本支持:nth-child()和:nth-of-type()。