テーブルの奇妙な行と色の異なる色を塗りつぶし

Question

灰色の背景を黒で、奇妙な表の行を明るい色で塗りつぶす必要があります。 CSSクラスは使用せず、HTML要素のみを使用します。

:が要素名よりも高い優先度を持つため、tr:nth-child(odd)とtable thead trを使用しましたが、後者では機能しませんでした。

それで、thead:first-childを「ハッキングする」ことなく（それは明らかですが、テーブルに複数のtheadsはありません）私には不可能です。

 
tr:nth-child(odd) { background-color: lightgreen; } 
 

 
table thead:first-child tr { background-color: black; color: lightgreen; }

<table> 
 
    <thead> 
 
    <tr><td>Name</td><td>City</td></tr> <!-- Green on Black --> 
 
    </thead> 
 

 
    <tbody> 
 
    <tr><td>row 1</td><td>London</td></tr> <!-- Black on Green --> 
 
    <tr><td>row 2</td><td>Paris</td></tr> 
 
    <tr><td>row 3</td><td>Munich</td></tr> 
 
    <tr><td>row 4</td><td>Kiev</td></tr> 
 
    <tr><td>row 5</td><td>Amsterdam</td></tr> 
 
    </tbody> 
 
</table>

はそれを行うにはよりエレガントな方法はありますか？

Answer 1

私はこれよりもそれを行うにはよりエレガントな方法はありません推測：

table thead tr { background-color: black; color: lightgreen; } 
 
table tbody tr:nth-child(odd) { background-color: lightgreen; }

<table> 
 
    <thead> 
 
    <tr><td>Name</td><td>City</td></tr> <!-- Green on Black --> 
 
    </thead> 
 

 
    <tbody> 
 
    <tr><td>row 1</td><td>London</td></tr> <!-- Black on Green --> 
 
    <tr><td>row 2</td><td>Paris</td></tr> 
 
    <tr><td>row 3</td><td>Munich</td></tr> 
 
    <tr><td>row 4</td><td>Kiev</td></tr> 
 
    <tr><td>row 5</td><td>Amsterdam</td></tr> 
 
    </tbody> 
 
</table>

Answer 2

あなたはこれを試みることができるが、それは本当に私が推測違いはありません。 `のtbody trのと間違っているだろうか

 
tr:nth-child(odd) { background-color: lightgreen; } 
 

 
th { background-color: black; color: lightgreen; }

<table> 
 
    <thead> 
 
    <tr><th>Name</th><th>City</th></tr> <!-- Green on Black --> 
 
    </thead> 
 

 
    <tbody> 
 
    <tr><td>row 1</td><td>London</td></tr> <!-- Black on Green --> 
 
    <tr><td>row 2</td><td>Paris</td></tr> 
 
    <tr><td>row 3</td><td>Munich</td></tr> 
 
    <tr><td>row 4</td><td>Kiev</td></tr> 
 
    <tr><td>row 5</td><td>Amsterdam</td></tr> 
 
    </tbody> 
 
</table>