html - 改变表格行的颜色，重置每个子标题

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