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

虽然您可以使用直接子项执行此操作,但并非所有浏览器都支持此功能.尝试:

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

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

选择器table.infoBox tr td说的所有内容都是:

将此样式应用于任何<td>标记的<tr>标记,该标记是任何具有infoBox类的表的子标记.

因此,您需要在此样式块下面更具体地说明,以便为类infoBox的表中的表声明要执行的操作.