覆盖＆＃34;表tr：nth-​​child（偶数/奇数）td {}＆＃34;

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

到目前为止一切都很好。

我想要的是改变所有单元格的背景和文本颜色，并使用类＃34绘制＆＃34;和类＃34; titel＆＃34;的行。

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

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

如何制作＆＃34; titel＆＃34; ＆＃34;画＆＃34;所示？

Answer 1

由于您使用table tr td作为奇数/偶数规则，因此您的覆盖规则需要相同的specificity（或更高），这意味着您不能只使用类名，就像我在上一条规则中看到的那样.painted。它没有做任何事情。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;