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所述，添加的第一个子规则应放置在底部，否则它会被覆盖。