CSS 和嵌套表

Question

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

有没有办法超越外面的规则？我基本上想告诉内表：

嘿内表你的名字是“X”。我希望你忘记所有关于你的外表和它的规则。我希望您遵守这些其他具体规则。

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

Answer 1

我假设您有以下

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 - 带类/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 2

最简单的方法是 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 */  

希望这会有所帮助。

Answer 3

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

这将确保只有选定表的直接子级（而不是嵌套表）才会收到样式。