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

我已经尝试了一百种方法来重写这一点，但我不能为了我的生活而得到第三个孩子。比特工作。我只是试图交替表行颜色。提前获得任何帮助表示赞赏。

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>