html - 试图覆盖表格行设置

Question

我正在使用这些规则

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

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

我正在尝试将表格放在其中一行中:

#InnerTable {
}

不过好像继承了MyTable的风格。如何覆盖我的内表的 MyTable 设置，使其对 InnerTable 的样式没有影响？

Answer 1

演示: 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 将“匹配任何作为后代的 F 元素一个 E 元素”。

请记住，如果您的 tr 实际上包含在 tbody 元素中，因为它们应该是创建有效的 table 元素，

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

您的规则必须反射(reflect)这一点:

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

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

演示: http://jsfiddle.net/marcuswhybrow/PLyzK/

---

或者您可以专门重置稍后应用的规则中的所有选项(如果可能，请避免，因为这会导致大量无意义的重复):

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

有关如何更具体(减少您的规则将应用到的元素集)的更多想法check out the W3C documentation regarding selectors .