css - 覆盖 "table tr:nth-child(even/odd) td {}"

Question

好吧，让我们再试一次。

这是我现在的表格代码的一部分。

<table id="infantryTbl">
    <thead>
        <tr>
            <th class="country">Country</th>
            <th class="type">Type</th>
            <th class="nr">Nr</th>
            <th class="name">Name</th>
            <th class="marking">Markings</th>
            <th class="comment">Comment</th>
            <th class="status">Status</th>
            <th class="code">Code</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="titel" colspan="8">Parachute Company</td>
        </tr>
        <tr>
            <td class="center">British</td>
            <td class="center">Command</td>
            <td class="right">2st</td>
            <td class="left">Rifle/MG</td>
            <td class="left">Company Cmd</td>
            <td class="left">Parachute Company</td>
            <td class="painted">Painted</td>
            <td class="center">BBX16</td>
        </tr>
    </tbody>
</table>

有了这个 css，我就得到了所有其他的 <tr>用不同的颜色。

table tr:nth-child(odd) td{
  background:#c1c1c1;color:#1f1f1f;
}
table tr:nth-child(even) td{
  background:#b0b0b0;color:#1f1f1f;
}

到目前为止一切都很好。

我想要的是更改所有具有“painted”类的单元格和具有“titel”类的行的背景和文本颜色。

*.titel {background:#424242;}
.painted {background:#375e37;}*

因为现在我更改类时没有任何反应，因为奇数/偶数 CSS 似乎覆盖了所有内容。

如何显示“title”和“painted”？

Answer 1

因为您使用 table tr td 作为奇数/偶数规则，所以您需要相同的 specificity (或更高)用于覆盖规则，这意味着您不能仅使用类名，如 .painted，正如您在我的最后一条规则中看到的那样。它只是什么都不做。

table tr:nth-child(odd) td{
  background:#c1c1c1;color:#1f1f1f;
}

table tr:nth-child(even) td{
  background:#b0b0b0;color:#1f1f1f;
}

table tr td.painted {      /* this works */
  background:yellow;
  color:red;
}
table tr td.titel {        /* this works */
  background:red;
  color:black;
}

.painted {                 /* this one doesn't work */
  background:lime;
}

<table id="infantryTbl">
    <thead>
        <tr>
            <th class="country">Country</th>
            <th class="type">Type</th>
            <th class="nr">Nr</th>
            <th class="name">Name</th>
            <th class="marking">Markings</th>
            <th class="comment">Comment</th>
            <th class="status">Status</th>
            <th class="code">Code</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="titel" colspan="8">Parachute Company</td>
        </tr>
        <tr>
            <td class="center">British</td>
            <td class="center">Command</td>
            <td class="right">2st</td>
            <td class="left">Rifle/MG</td>
            <td class="left">Company Cmd</td>
            <td class="left">Parachute Company</td>
            <td class="painted">Painted</td>
            <td class="center">BBX16</td>
        </tr>
        <tr>
            <td class="titel" colspan="8">Parachute Company</td>
        </tr>
        <tr>
            <td class="center">British</td>
            <td class="center">Command</td>
            <td class="right">2st</td>
            <td class="left">Rifle/MG</td>
            <td class="left">Company Cmd</td>
            <td class="left">Parachute Company</td>
            <td class="painted">Painted</td>
            <td class="center">BBX16</td>
        </tr>
        <tr>
            <td class="titel" colspan="8">Parachute Company</td>
        </tr>
        <tr>
            <td class="center">British</td>
            <td class="center">Command</td>
            <td class="right">2st</td>
            <td class="left">Rifle/MG</td>
            <td class="left">Company Cmd</td>
            <td class="left">Parachute Company</td>
            <td class="painted">Painted</td>
            <td class="center">BBX16</td>
        </tr>
        <tr>
            <td class="titel" colspan="8">Parachute Company</td>
        </tr>
        <tr>
            <td class="center">British</td>
            <td class="center">Command</td>
            <td class="right">2st</td>
            <td class="left">Rifle/MG</td>
            <td class="left">Company Cmd</td>
            <td class="left">Parachute Company</td>
            <td class="painted">Painted</td>
            <td class="center">BBX16</td>
        </tr>
        <tr>
            <td class="titel" colspan="8">Parachute Company</td>
        </tr>
        <tr>
            <td class="center">British</td>
            <td class="center">Command</td>
            <td class="right">2st</td>
            <td class="left">Rifle/MG</td>
            <td class="left">Company Cmd</td>
            <td class="left">Parachute Company</td>
            <td class="painted">Painted</td>
            <td class="center">BBX16</td>
        </tr>
    </tbody>
</table>