nth-childコードが機能しません

Question

body { 
     background-color: grey; 
} 

table { 
     width: 100%; 
} 
th, td, tr { 
     border-collapse: collapse; 
} 
th { 
     border: 3px solid black; 
     background-color: #F2F2F2 
} 
td { 
     border: 1px solid black; 
} 
tr:nth-child(odd) { 
     background-color: #ff0000 
     color: black 
} 
tr:nth-child(odd) { 
     background-color: #00ffff 
     color: white 
} 

私はこの書き直し方法を100回試しましたが、私の人生にとっては「nth-child」ビットを働かせることはできません。私は単にテーブルの行の色を交互にしようとしています。事前に助けていただければ幸いです。

Answer 1

行を追加するのではなく、列に背景を配置する必要があります。

tr:nth-child(odd) td {} 
tr:nth-child(even) td {} 

あなたが望むものを達成するには十分です。

Here's a jsFiddle achieving what you want

Answer 2

CSS

<style type="text/css"> 
body { 
    background-color: grey; 
} 

table { 
    width: 100%; 
} 
th, td, tr { 
    border-collapse: collapse; 
} 
th { 
    border: 3px solid black; 
    background-color: #F2F2F2; 
} 
td { 
    border: 1px solid black; 
} 
tr:nth-child(odd) td { 
    background-color: #ff0000; 
    color: black; 
} 
tr:nth-child(even) td { 
    background-color: #00ffff; 
    color: white; 
} 
</style> 

EG：HTML

<table width="100%" border="1" cellspacing="0" cellpadding="0"> 
<tr> 
<th>&nbsp;Head 1</th> 
<th>&nbsp; Head 2</th> 
</tr> 
<tr> 
<td>&nbsp; Content 1.1</th> 
<td>&nbsp; Content 1.2</td> 
</tr> 
<tr> 
<td>&nbsp; Content 2.1</th> 
<td>&nbsp; Content 3.2</td> 
</tr> 
<tr> 
<td>&nbsp; Content 3.1</th> 
<td>&nbsp; Content 3.2</td> 
</tr> 
<tr> 
<td>&nbsp; Content 4.1</th> 
<td>&nbsp; Content 4.2</td> 
</tr> 
</table> 

結果

Answer 3

あなたはそれを使用する必要があります。

<style type="text/css"> 
    tr:nth-child(odd) td { 
    background-color: #ff0000; 
    color: black; 
} 
tr:nth-child(even) td { 
    background-color: #00ffff; 
    color: white; 
} 
</style>