CSS：如何在每行中选择第一个<td>元素？

Question

我有以下html片段：

<div id = "fromAddress">
        <table>
            <tr><td id="from">From:</td>
                <td>
                    <table>
                        <tr><td>Acquirung Bank</td></tr>
                        <tr><td>Risk Management</td></tr>
                        <tr><td>100 Bond Street</td></tr>
                        <tr><td>London</td></tr>
                        <tr><td>W1</td></tr>
                    </table>
                </td>
            </tr>
            <tr><td>Fax:</td><td id="fromFax">0207 234567890/</td></tr>
            <tr><td>Tel:</td><td id="fromTel">0207 123456789/</td></tr>
        </table>
</div>

我的CSS：

#fromAddress td:first-child
{
    font-weight: bold;
}

#fromAddress table table td:fist-child
{
    font-weight:normal;
}

我如何以粗体显示文本？那么，“发件人”，“传真”和“电话”是否为粗体？

Answer 1

像这样：

#fromAddress > table > tbody > tr > td:first-child {
    font-weight: bold;
}

https://jsfiddle.net/j2mb4f0g/

Chrome至少会添加tbody标记，因此您可能应该将其添加到html中，以确保该标记在所有浏览器中均有效。

或者，为了避免所有'>，您可以执行以下操作：

td:first-child {
    font-weight: bold;
}

table table td:first-child {
    font-weight: normal;
}

https://jsfiddle.net/80v98xuf/