Html 第n个子代码不'；行不通

我已经尝试了一百种重写的方法，但我无法让“第n个孩子”的部分发挥作用。我只是在尝试交替表格行的颜色。感谢您事先提供的任何帮助。

您需要将背景放在列上，而不是行上

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
}

将足以实现你想要的

---

您需要将背景放在列上，而不是行上

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
}

将足以实现你想要的

CSS

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

身体{
背景颜色：灰色；
}
桌子{
宽度：100%；
}
th，td，tr{
边界塌陷：塌陷；
}
th{
边框：3倍纯黑；
背景色：#F2F2；
}
运输署{
边框：1px纯黑；
}
tr:N个孩子（奇数）td{
背景色：#ff0000；
颜色：黑色；
}
tr:n个孩子（偶数）td{
背景色：#00ffff；
颜色：白色；
}

例如：HTML

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

总目1
总目2
内容1.1
内容1.2
内容2.1
内容3.2
内容3.1
内容3.2
内容4.1
内容4.2

结果

CSS

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

身体{
背景颜色：灰色；
}
桌子{
宽度：100%；
}
th，td，tr{
边界塌陷：塌陷；
}
th{
边框：3倍纯黑；
背景色：#F2F2；
}
运输署{
边框：1px纯黑；
}
tr:N个孩子（奇数）td{
背景色：#ff0000；
颜色：黑色；
}
tr:n个孩子（偶数）td{
背景色：#00ffff；
颜色：白色；
}

例如：HTML

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

总目1
总目2
内容1.1
内容1.2
内容2.1
内容3.2
内容3.1
内容3.2
内容4.1
内容4.2

结果

您需要使用它

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

tr:N个孩子（奇数）td{
背景色：#ff0000；
颜色：黑色；
}
tr:n个孩子（偶数）td{
背景色：#00ffff；
颜色：白色；
}

您需要使用它

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

tr:N个孩子（奇数）td{
背景色：#ff0000；
颜色：黑色；
}
tr:n个孩子（偶数）td{
背景色：#00ffff；
颜色：白色；
}

除了两次“奇数”呼叫，这就成功了：）谢谢你，先生@Addohm已修复，对此表示抱歉！这就成功了，除了两个“奇数”电话：）谢谢你，先生@Addohm已修复，对此表示抱歉！