4

これは私のCSSスタイルシートのセクションです:

table tr td {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
    overflow: wrap;
    background-color: #CCFFFF;
    text-align: center;
}
table {
    width: 75%;
}
tr {
    maximum-width: 200px;
}
tr.RedThreshold {
    background-color: red;
}
tr.YellowThreshold {
    background-color: yellow !important;
    font-weight: bold;
}

YellowThreshold私のHTMLでこの要素をスタイルします：

<tr class="YellowThreshold">
    <td>vrd70</td>
    <td>29</td>
    <td>0x127c</td>
    <td>4.86</td>
    <td>4.54</td>
    <td>6.06</td>
</tr>

最終結果は から太字を取得しますがYellowThreshold、黄色の背景色を取得していません。Colorjustと withで試しましたBackground-Colorが、変化はありません。私が乗り越えていないいくつかの優先課題があります。助言がありますか？

4

2 に答える 2

3

background-colorはテーブル行に適用されますがtd、セレクター内の明示的なターゲットtable tr tdが優先されます。

変化する：

tr.RedThreshold {
    background-color: red;
}
tr.YellowThreshold {
    background-color: yellow !important;
        font-weight:bold;
}

に：

tr.RedThreshold td {
    background-color: red;
}
tr.YellowThreshold td {
    background-color: yellow !important;
        font-weight:bold;
}

@adriftは、OP の質問の根本原因として、CSS 2.1 仕様とスタッキング コンテキストを正しく参照しています。

于 2013-06-14T19:01:55.880 に答える