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;
}

我该如何使第一个s中的文本加粗？所以，“From”，“Fax”和“Tel”都是加粗的吗？

- gene

---

你可以使用 tr td:first-child {}。 - chani

不起作用。它还会使中间表格的内容加粗。我只需要“From”、“Fax”和“Tel”。 - gene

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/

- Lee

---

我尝试过了，结果整个内部表格的内容也都加粗了。 - gene

看看这个fiddle，我非常确定它可以工作（至少在Chrome 46中能够工作）。 - Lee

当我使用div标签引用时，它不起作用。请查看编辑。 - gene

你编辑的帖子中有一个拼写错误，'fist-child' 应该是 'first-child'。 - Lee