删除表

Question

我在删除子表中的继承样式时遇到问题。我的表基本上是这样的：

<table class="twocoltable">
<thead>
    <tr><th>BlahBlah</th></tr>
</thead>
<tr>
    <td>blah</td>
    <td>
        <table class="nostyle">
            <tr>
                <td>stuff</td>
                <td>stuff</td>
            </tr>
        </table>
    </td>
</tr>
</table>

编辑我的.css现在看起来像这样。子表没有样式，但父表的样式不起作用，但是这些样式正在运行。

.twocoltable { border-spacing: 0px; padding: 0px; border: 1px solid #666666; }
.twocoltable>thead>tr>th { text-align: center; font-weight: bold; color: black; font-size: 12pt; padding: 4px; background-color: #DDD; }
.twocoltable>tr>td:first-child { text-align: right; vertical-align: top; font-weight: bold; color: black; font-size: 9pt; padding: 4px; border-top: 1px solid #BBBBBB; border-right: 1px solid #BBBBBB; }
.twocoltable>tr>td:last-child { text-align: left; vertical-align: top; font-weight: normal; color: #333333; font-size: 9pt; padding: 4px; border-top: 1px solid #BBBBBB; white-space: nowrap; }

.nostyle * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

最后我得到的是格式正确的父表，但子表还包含格式。它仍然具有粗体，边框和对齐方式。

我错过了什么？

Answer 1

仅将您的样式分配给父表的直接子项。这适用于margin和padding等属性。即：

而不是：

.twocoltable th
.twocoltable tr td:first-child
.twocoltable tr td:last-child

执行：

.twocoltable>thead>tr>th
.twocoltable>tr>td:first-child
.twocoltable>tr>td:last-child

但是，font-weight等其他属性仍将应用于子元素，因为它们是继承的。对于那些，您必须手动覆盖.nostyle定义（您尚未完成）。 E.g：

.nostyle {
    font-weight: normal; // initial also works
}

修改：

更新我的答案，概述最终解决方案应该是什么。

.twocoltable th {
    // styles that will be applied to all th elements that live inside .twocoltable, including sub tables
}

.twocoltable tr td:first-child {
   // styles that will be applied to all elements that are the first td of a parent and live inside .twocoltable, including sub tables
}

.twocoltable tr td:last-child {
   // styles that will be applied to all elements that are the last td of a parent and live inside .twocoltable, including sub tables
}

.twocoltable>thead>tr>th {
    // styles that will be applied ONLY to th elements that are direct children of tr elements that are direct children of thead elements that are direct children of .twocoltable. This excludes sub table th elements
}

// You should have got the idea by now
.twocoltable>tr>td:first-child {...}
.twocoltable>tr>td:last-child {...}

.nostyle {
    // Styles that override styles that are inherited from its parent element even when that style has not been directly applied to it (e.g. font-weight)
}

Answer 2

使用此表示法：.twocoltable tr，您将该样式应用于.twocoltable tr的所有子项，无论它们有多深。

您可以选择通过向tr元素等添加类来更具体。或者您可以使用子选择器>。它确保样式仅适用于直接孩子：.twocoltable > tr。

Answer 3

通过对CSS的更多特异性，一个很好的摘要是found linked here，它将优先。也许为你的主表使用一个ID，你的nostyle单元格的类是最好的组织方式吗？

<table id="twocoltable">
<table class="nostyle">

另一个选项，您可以使用！important重写CSS，一个jsFiddle linked here。