强制覆盖 TD 单元的 CSS 的最佳方法

Question

我想用背景色覆盖 TD 的样式。

我的问题是我有（机械地）生成的表，它在 Zebra Stripes 的所有 TR 上放置了一个 CLASS。

所以我有

<table>
 <tbody>
  <tr class="myTROdd">...
  <tr class="myTREven">...
   <td class="myBackRed">Highlight this cell</td>

我的 CSS 知识很薄弱，但据我了解

.myBackRed {background-color: #FF0000;}

不太具体，所以不起作用。

.myTREven TD.myBackRed {background-color: #FF0000;}

是特定的并且确实有效，但我想要更通用的东西，例如我尝试过这个（不起作用）

.TABLE TD.myBackRed {background-color: #FF0000;}

我遇到的问题

.myTREven TD.myBackRed {background-color: #FF0000;}

是实际的CMS模板是

  <tr class="my{TAG}TROdd">...

其中 {TAG} 被大量可选的“调整”值中的任何一个替换，我试图避免在样式表中为我的单元格覆盖样式编写所有可能的组合

Fiddle 示例，下面是第 3-4 行的 TD 覆盖样式，第 5-6 行没有显式覆盖 CSS

https://jsfiddle.net/dB93J/1240/

这个question 很接近，但不能解决我的问题。

编辑：根据@Roberrrt 评论，我已更改

.TABLE TD.myBackRed {background-color: #FF0000;}

到

TABLE TD.myBackRed {background-color: #FF0000;}

而且不管 TR 类的变化如何，这似乎确实会覆盖单元格。见新小提琴https://jsfiddle.net/dB93J/1247/

Answer 1

如果对您的问题的理解是正确的。这是您问题的可能答案。首先，我使用 class="myBackYellowTREeven" 选择此 TR 标签的类名，使用 class="myBackYellowTROdd" 选择 TD 标签。下面，是我的解决方案...

.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

/* NOTE myTROdd is not defined */

.myTREven,.myTREven TD
{
    background-color:#f1f1f1
}
.myBackYellowTROdd
,.myBackYellowTROdd TD
{
    background-color: #fffccc;
}
.myBackYellowTREven
,.myBackYellowTREven TD
{
    background-color: #fff799;
}
/* .myBackRed */ /* This is what I would like to define! ... */
/* , .myBackRed TD */ /* ... or this even ... */
/* , .TABLE TD.myBackRed */ /* ... or EVEN THIS */
 .myTREven TD.myBackRed
, .myTROdd TD.myBackRed /* In case myTROdd defined in future */
/* , .myBackYellowTROdd TD.myBackRed */ /* Do I really need this for EVER possible TR style? */
/* , .myBackYellowTREven TD.myBackRed */ /* DITTO */
{
    background-color: #FF0000
}

/* MY SOLUTION */
tr.myBackYellowTREven td.myBackRed,
tr.myBackYellowTROdd td.myBackRed {
background-color: #FF0000}

<table class="zui-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Height</th>
            <th>Born</th>
            <th>Comment</th>
        </tr>
    </thead>
    <tbody>
        <tr class="myTROdd">
            <td>Jason Thompson</td>
            <td>PF</td>
            <td>6'11"</td>
            <td>06-21-1986</td>
            <td>Normal ODD Row</td>
        </tr>
        <tr class="myTREven">
            <td>Fred Bloggs</td>
            <td>PF</td>
            <td>5'7"</td>
            <td>01-08-1988</td>
            <td>Normal EVEN Row</td>
        </tr>
        <tr class="myTROdd">
            <td>DeMarcus Cousins</td>
            <td>C</td>
            <td class="myBackRed">6'11"</td>
            <td>08-13-1990</td>
            <td>ODD Row with Red cell</td>
        </tr>
        <tr class="myTREven">
            <td>Isaiah Thomas</td>
            <td>PG</td>
            <td class="myBackRed">5'9"</td>
            <td>02-07-1989</td>
            <td>EVEN Row with Red cell</td>
        </tr>
        <tr class="myBackYellowTROdd">
            <td>Ben McLemore</td>
            <td>SG</td>
            <td class="myBackRed">6'5"</td>
            <td>02-11-1993</td>
            <td>Yellow ODD Row
                - Red cell missing</td>
        </tr>
        <tr class="myBackYellowTREven">
            <td>Marcus Thornton</td>
            <td>SG</td>
            <td class="myBackRed">6'4"</td>
            <td>05-05-1987</td>
            <td>Yellow EVEN Row
                - Red cell missing</td>
        </tr>
    </tbody>
</table>