css父子覆盖

Question

我有一个 CSS 问题。我在另一张 table 里面有一张 table 。每个表都有不同的颜色(取决于里面的数据)。所以我为每张 table 放了一个类(class)。但是颜色取决于在 css 上设置类的时间。我的意思是如果颜色 1 在第二个之前声明，它将覆盖子颜色。

我做了一个样本:http://jsfiddle.net/b8T6V/2/ (完整版)

 <table border="0" class="Grid0">
        <tr class="even">
                    <td>table 1, row 1</td>       
        </tr>
        <tr class="even">
            <td>
                <table border="0" class="Grid1">
                    <tr class="even">
                        <td>table 2, row 1</td>       
                    </tr>
                    <tr class="odd">
                        <td>table 2, row 2</td>       
                    </tr>
                </table>
            </td>        
        </tr>
        <tr class="odd">
            <td>table 1, row 2</td>       
        </tr>
        <tr class="odd">
             <td>
                <table border="0" class="Grid1">
                    <tr class="even">
                        <td>table 2, row 1</td>       
                    </tr>
                    <tr class="odd">
                        <td>table 2, row 2</td>       
                    </tr>
                </table>
            </td>     
        </tr>
    </table> 


table.Grid0 tr.even
{
    background-color: RED ;
}
table.Grid0 tr.odd
{
    background-color: BLUE;
}

table.Grid1 tr.even
{
    background-color: BLACK;
}
table.Grid1 tr.odd
{
    background-color: WHITE;  /*background-color: blue;*/
}

如果您使用 Grid1 而不是 Grid0，并且使用 Grid0 而不是 Grid1。那是行不通的。

jsfiddle 示例:

第一个表从 Grid0 开始，第二个表从 Grid1 开始。第二个应该有红色/蓝色的 table 。

谢谢你的帮助

Answer 1

因为您的内部 tr 在两个表中，一个是 Grid0 类，另一个是 Grid1 类，那么两组 CSS 规则都适用，所以(因为它们稍后出现在文件中)背景色/白色背景色优先。

解决此问题的最简单方法是将 > tbody > 插入到所有相关规则中，以便只考虑父表的类，而不考虑任何其他祖先表。