CSS的第一个后代

Question

我正在尝试删除表格中第一个h3元素上方的边距（它看起来非常奇怪，直接位于其上方的h2元素）

是否可以选择第一个h3元素？

<table>
<tbody>
    <tr>
        <td>
            <h3>I want to select this</h3>
        </td>
    </tr>
    <tr>              
        <td>
            <h3>But not this</h3>
        </td>
    </tr>
</tbody>
</table>

我试过这个：

table tbody tr td:first-child h3 {
    margin-top: 0em;
}

但我惨遭失败

Answer 1

您需要将:first-child附加到tr，因为每个td都是tr的第一个也是唯一的孩子：

table tbody tr:first-child td h3 {
    margin-top: 0em;
}

Answer 2

table tbody tr td:first-child h3 {
    margin-top: 0em;
}

td是两个案例中的第一个孩子，在tr或更好的地方使用它仍然会在第一个h3中添加一个类。

Answer 3

对于不支持:first-child的浏览器，您可以采用其他（反向）方式，通过选择相邻的同级tr和+为下一个项目指定单独的样式：

table tbody tr td h3 {
    margin-top: 0em;
}

table tbody tr + tr td h3 {
    margin-top: 1em; /* any needed value for all following H3's */
}