覆蓋「表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>