CSS和嵌套表

Question

我有包含多个其他表的html表.我的问题是内部表继承了与外部表相同的规则.

有没有办法超越外围桌子的规则？我基本上想告诉内表:

嘿内表你的名字是"X".我希望你忘记你的外表及其规则.我希望你遵循这些其他具体规则.

有没有办法在HTML/CSS中实现这一点？例子？

Answer 1

table.something > thead > tr > td,
table.something > tbody > tr > td,
table.something > tfoot > tr > td,
table.something > tr > td {
   ...
}

这将确保只有所选表的直接子项而不是嵌套表才会接收样式.

Answer 2

我假设你有以下内容

HTML

<table class="outer-table">
    <tr>
        <td>
            <table class="inner-table">
                <tr>
                    <td>
                        I'm some content!
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS - 没有类/ ID

table { border: 1px solid black; }
table tr td table { border: 1px solid green; }

有时你可以逃脱:

table { border: 1px solid black; }
table table { border: 1px solid green; }

CSS - 使用Class/ID

带有类和ID的小注释.类可以应用于您想要的任意数量的元素,并带有指定的样式.ID应仅用于一个元素,因为这是该元素的标识.这意味着如果您有两个嵌套表,则需要为该第二个表提供一个新的唯一ID.

ID在CSS中显示为#.因此,如果您只想将它​​用于特定ID,它将是:

#outer-table { /* Outer table Style */ }
#inner-table { /* Inner table Style */ }

在CSS中使用类(如示例所示)是一个句点.如果使用句点而未指定元素,则它将用于具有相同名称的类的所有元素,因此最好指定要将其附加到的元素.

table.outer-table { /* Outer table Style */ }
table.inner-table { /* Inner table Style */ }