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

我想更改第一行的背景颜色，并更改其下面的所有其他行的背景颜色，即偶数概念。
目前，我正在将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的输出：

最佳答案

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


  ：first-child CSS伪类表示任何元素，它们是
  其父级的第一个子元素。
  
  语法element：first-child {样式属性}


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