0

css に問題があります。葯のテーブルの中にテーブルがあります。各テーブルには異なる色があります (内部のデータによって異なります)。そのため、各テーブルにクラスを配置しました。ただし、クラスがcssに設定されている場合、色は異なります。つまり、色 1 が 2 番目の色よりも前に宣言されている場合、子の色がオーバーライドされます。

サンプルを作成しました: 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;*/
}

Grid0 の代わりに Grid1 を使用し、Grid1 の代わりに Grid0 を使用する場合。それはうまくいきません。

jsfiddle サンプル:

最初のテーブルは Grid0 から始まり、2 番目のテーブルは Grid1 から始まります。2 番目には、赤/青のテーブルが必要です。

ご協力ありがとうございました

4

2 に答える 2

2

内部trは 2 つのテーブル内にあるため、1 つはクラスのテーブル、もう 1 つはクラスのクラスのテーブルでありGrid0、Grid1両方の CSS ルールのセットが適用されます。したがって、(後でファイルに表示されるため) バック/ホワイトの背景色が優先されます。

これを修正する最も簡単な方法> tbody >は、関連するすべてのルールに挿入して、親テーブルのクラスのみが考慮され、他の祖先テーブルは考慮されないようにすることです。

于 2012-11-30T20:37:08.160 に答える
0

次のように、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;*/
}
于 2012-11-30T20:37:30.670 に答える