Question

我正在试图弄清楚如何使这项工作。不应该背景：外表的红色td会覆盖所有其他的吗？为什么这个例子最终会出现黄色背景，尽管那是嵌套在DOM中最远的元素？

<style type="text/css">
    table, td, div {
    height: 200px;
    width: 400px;
}
</style>

<table class="outer" cellpadding="0" cellspacing="0">
<tr>
    <td style="background: red">
    <div style="overflow:auto;background:green">
    <table class="inner" style="width:800px">
        <tr>
            <td style="background:yellow"></td>
        </tr>
    </table>
    </div>
    </td>
</tr>
</table>

这是JSFiddle for this。

总结......我试图用父div中的背景以及外部表的父td覆盖内部表格单元格的背景颜色。这有可能吗？

Answer 1

Td的背景有最后的发言权。所以你在技术上不能单独使用css。即使你在div风格中放置了！important也行不通。无论如何，你可以通过js修复它，并用另一个替换td的颜色。

Answer 2

bcz它的css默认行为，如果你给父标签的样式比它自动由子html继承

如果您想在子标记中使用其他css，则必须为该特定标记指定样式它覆盖你的父母风格

Answer 3

第二个td始终位于第一个td的背景之上，因此位于第一个style的背景之上。当您使用style属性时，该属性始终优先于style块或外部CSS文件中应用的任何CSS，如果不使用JavaScript或移动样式，您将无法更改此行为从style属性到$('.inner td').css({ 'background' : 'colour or image here' });块。

使用jQuery，您可以通过以下类似的方式实现此目的：

{{1}}

带有表和溢出div的背景和z-index

3 个答案: