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;*/
}

css父子被覆盖

2 个答案: