html - 第 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
}

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

Answer 1

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

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

将足以实现你想要的。

Here's a jsFiddle achieving what you want