更改表行的颜色，重置每个子标题

Question

使用css可以改变tr:nth-child(even) {background: #CCC}中表格行的颜色。但我有一些不同类型的数据。

|a |b |c |d | ---style class 1
|     h1    | ---style class 2
|a1|b1|c1|d1| ---style class 3
|     h2    | ---style class 2
|a2|b2|c2|d2| ---style class 3
|a3|b3|c3|d3| ---style class 4

其中h1, h2是跨越所有列的子标题。 a,b,c,d是表格标题。我想改变行颜色，每个子标题重置模式。标题有不同的造型。表头也有自己的样式。

如何才能优雅地实现这一目标。

编辑： 子标题（h1, h2）下的内容是动态生成的。

Answer 1

在CSS中，您无法定位父元素。这可以通过jquery

完成

$('h1').parent().css('background', 'red');

$('h2').parent().css('background', 'green');

<强> DEMO

Answer 2

这可以在CSS中单独完成

FIDDLE

假设您的子标题行已设置colspan，您可以通过（例如）

简单地使用适用的属性定位这些单元格元素

table td[colspan='4']{
    color:red;
}