html - CSS 嵌套无法按照我想要的方式工作!

Question

好吧，假设我有这个

<table class="infoBox">
    <tr>
        <td>
            test
        </td>
        <td>
            <table>
                <tr>
                    <td>
                        this should not be bold!
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

然后我们为此得到了一些 CSS

Table.infoBox tr td { font-weight: bold; }

现在我的问题是嵌套表似乎也获得了 css，而我只希望外部表获得此 css 我该如何定义它以使嵌套表不受 css 影响？

Answer 1

虽然您可以对直接 child 执行此操作，但并非所有浏览器都支持。尝试:

table.infoBox tr td { font-weight: bold; }

table.infoBox table tr td { font-weight: normal; }

所有选择器 table.infoBox tr td说是:

将此样式应用于任何 <td>任何 <tr> 的子标签标记，它是具有 infoBox 类的任何表的子项。

因此，您需要在此样式 block 下方更具体，以便声明您要对类 infoBox 的表中的表执行的操作。