如何更改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伪类，所有浏览器都支持它。

  

：first-child CSS伪类表示任何元素   其父母的第一个子元素。

     

语法元素：first-child {style properties}

添加到您的CSS：

{{1}}

JSFiddle

修改：正如wrick17所述，添加的第一个子规则应放在底部，否则将被覆盖。

Answer 2

如果您特别想要更改第一行的属性，请使用第一个子选择器

.table-striped tbody tr:first-child td { 
   background: red; 
}

Answer 3

http://jsfiddle.net/zgejvLyr/1/

使用first-child css选择器

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