覆盖“表tr：第n个孩子（偶数/奇数）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; 
} 

目前为止还不错。

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

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

由于现在没有什么反应，当我改变类，因为奇/偶CSS似乎覆盖了一切。

如何显示“titel”和“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>