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的表中的表声明要执行的操作。

Answer 2

使用子选择器：

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

（IE6不支持）

注意：神秘的tbody元素。如果您没有将其插入，则由浏览器插入。这是因为表有三个部分：thead, tbody and tfoot。如果没有其中一个部分，则会将行添加到tbody元素中。

或组合：

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

这个有很多潜在的变化。

Answer 3

Table.infoBox表tr td {font-weight：normal; }

Answer 4

也可以使用：

table.infoBox { font-weight: bold; }
table.infoBox table { font-weight: normal; }

或

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

尽管所有css都依赖于整个css中的其他字体权重规则，但是很容易注意到css declerations是基于decendensy而不是直接的父子关系。因此table{}对内容的影响与td{}完全相同，只要您没有更强或更接近定义的内容。

CSS嵌套不按我想要的方式工作！

4 个答案: