css - css父子覆盖

Question

我有一个CSS问题。我在花药桌子里面有一张桌子。每个表都有不同的颜色（取决于里面的数据）。所以我为每张桌子放了一个班级。但颜色取决于何时在 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 开头。第二个应该有红色/蓝色的表格。

感谢您的帮助

Answer 1

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

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

Answer 2

您需要为第二个表的选择器添加更多特异性，如下所示：

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

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