html - CSS:如何选择每行中的第一个 元素？

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/