html - 如何更改html表格中第一行的背景颜色和所有其他行的交替颜色

Question

我想更改第一行的背景颜色，它下面的所有其余行都是交替颜色，即偶数概念。目前我正在为这样的替代颜色应用 css:

.table-striped tbody tr:nth-child(odd) td {
    background-color: #81DAF5;
}

.table-striped tbody tr:nth-child(even) td {
    background-color: #CEECF5;
}

.table-striped tbody tr.highlight td {
    background-color: #F2F5A9;
}

这里，.table-striped 是表类。那么我怎样才能改变第一行的颜色，比如红色。

上述 css 的输出:

Answer 1

您可以使用 :first-child伪类，所有浏览器都支持。

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

Syntax element:first-child { style properties }

添加到您的 CSS:

.table-striped tbody tr:nth-child(odd) td {
  background-color: #81DAF5;
}

.table-striped tbody tr:nth-child(even) td {
  background-color: #CEECF5;
}

.table-striped tbody tr.highlight td {
  background-color: #F2F5A9;
}

.table-striped tbody tr:first-child td {
  background-color: #FF0000;
}

JSFiddle

编辑:如wrick17所述, 添加的第一个 child 规则应该放在底部，否则它会被覆盖。