试图重写表行设置

Question

进出口使用这些规则

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

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

我试着去把一个表里面的行之一：

#InnerTable { 
} 

但它似乎是inhereting的MyTable的风格。如何覆盖我的内表的MyTable设置，以便它对InnerTable的样式没有影响？

Answer 1

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

你可以重写现有的规则更加具体。使用子选择，你可以有：

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

这限制了规则，这是直接包含的元素中与ID #MyTabletr元素。然后，你可以为你的#InnerTable添加特定的规则，以及：

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

的E > F选择“匹配任意F元素是一个元素E的孩子”，而正常E F将“匹配任何F元素是后代E元素“。

记住裸，如果你的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文件，添加关键字重要 例如：

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

待办事项这在你的CSS文件的底部，在第n个子规则之后。 在你的桌子上，使用td class =“correct”或td class =“incorrect”