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 */ }

Answer 3

最简单的方法是class和id。一定要使用该元素。

table.outter { some: style; } /* class */  
table#inner { some: style; } /* id */

您也可以使用

table { some: style; }  
table table { some: style; } /* override outter table */

或合并两个

table.outter { some: style; } /* class */  
table.outter table#inner { some: style; } /* id */

希望这有帮助。

CSS和嵌套表

3 个答案: