覆盖嵌套内部表上的表样式

Question

请查看我的js小提琴：

http://jsfiddle.net/WillingLearner/gzYPU/7/

正如您可以清楚地看到当您运行小提琴时，带边框的内部表格不会显示自己的样式。它继承了父母的风格。

请帮我显示内部表格只有自己的样式，同时仍然嵌套在父表格行中。

Answer 1

有多种方法可以解决您的问题。 tr上有两种样式：

#MainTable_Forums tr:nth-child(even)
#MainTable_Forums tr:nth-child(odd)

这些用于内部tr，因为ID规则绑定比类规则更紧密。

您还可以在HTML中插入<tbody>，然后将其用于条带化：

#MainTable_Forums > tbody > tr:nth-child(even)
#MainTable_Forums > tbody > tr:nth-child(odd)

有些浏览器会为您插入<tbody>，因此您需要在选择器和HTML中使用它，希望涵盖所有情况。示例：http://jsfiddle.net/ambiguous/b6zEy/

根据您的具体需求，您可以使用以下内容替换内部tr规则：

.ThreadInfo_Container td

将样式直接应用于td。效果并不完全相同，但根据您的具体情况，它可能会更好地工作;有些浏览器会在tr元素上乱七八糟的边框，有些浏览器会很好。示例：http://jsfiddle.net/ambiguous/a4LEg/

Answer 2

内部表的选择器比外部表的选择器少specific，因此外部表的样式具有优先权。您可以使内部表的选择器更具体，如下所示：

#MainTable_Forums .ThreadInfo_Container tr { ... }