css - 样式并不总是适用于嵌套表格

Question

This jsfiddle包含一个包含 4 个嵌套表的表。

第一行表格的边框没有折叠，所以我假设嵌套表格不会从它们的父表格继承样式。

由于 td.small table，第二行表格的边框被折叠了。好。

但是在同一行的td 上的padding 不是0，因为td.small 应该是0。不好。

我认为在 css 文件末尾和最里面的元素中声明的样式应该是应用的样式。第二行包含table的td有class="small"，定义在css的末尾，但是它的padding 不适用。

在第四行，td 应用了样式和显式样式属性，在这种情况下它有效。

为什么第二行表格没有用零填充呈现？为什么最后一个用零填充渲染？

Answer 1

table.large td 规则覆盖了 td.small 规则，因为它的选择器有两个元素名称和一个类名称，而 td.small 有一个元素名和一个类名。一个简单的解决方法是:

td.small {
    padding: 0em !important;
}

或者，您可以向 td.small 选择器添加更多元素/类。

More information on selector priority