Question

我正在使用这些规则

#MyTable tr:nth-child(odd) {
}

#MyTable tr:nth-child(even) {
}

我正在尝试将一个表放在其中一行中：

#InnerTable {
}

但它似乎是MyTable的风格所在。如何覆盖内部表的MyTable设置，使其对InnerTable的样式没有影响？

Answer 1

DEMO： http://jsfiddle.net/marcuswhybrow/PLyzK/

您可以将现有规则重写为更具体。使用子选择器，您可以：

#MyTable > tr:nth-child(odd) {}
#MyTable > tr:nth-child(event) {}

这会将规则限制为tr个元素，这些元素直接包含在ID为#MyTable的元素中。然后，您还可以为#InnerTable添加特定规则：

#InnerTable > tr:nth-child(odd) {}
#InnerTable > tr:nth-child(event) {}

E > F选择器“匹配作为元素E的子元素的任何F元素”，而普通E F将“匹配作为E元素后代的任何F元素”。

请注意，如果您的tr实际上包含在tbody元素中，那么它们应该创建有效的table元素，

<table id="MyTable">
    <tbody>
        <tr>
            ...
        </tr>
    </tbody>
</table>

你的规则必须反映这一点：

#MyTable > tbody > tr:nth-child(odd) {}
#MyTable > tbody > tr:nth-child(event) {}

#InnerTable > tbody > tr:nth-child(odd) {}
#InnerTable > tbody > tr:nth-child(event) {}

DEMO： http://jsfiddle.net/marcuswhybrow/PLyzK/

或者您可以专门重置稍后应用的规则中的所有选项（尽可能避免，因为这会导致很多无意义的重复）：

#MyTable #SomeOtherTable tr:nth-child(odd) {
    some-property: the-default;
}

有关如何更具体的更多想法（减少规则适用的元素集）check out the W3C documentation regarding selectors。

Answer 2

我找到了答案！如果您只是尝试为td指定一个类，它只适用于其他所有行..为了使其在任何地方都可以工作，在css文件中添加关键字！important 例如：

.correct {
    background-color:#C9FDC1 !important}    
.incorrect {
    background-color:#FDB5B7 !important}

在第n个子规则之后，在css文件的底部执行此操作。在你的桌子上，使用td class =“correct”或td class =“wrong”

尝试覆盖表行设置

2 个答案: