第 n 个子代码不起作用

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
}

我已经尝试了一百种方法来重写它，但我终其一生都无法让 'nth-child' 位发挥作用。我只是想改变 table 行的颜色。感谢您提前提供帮助。

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>

第 n 个子代码不起作用

nth-child code doesn't work

html

css

styles