css - 如何选择相同类别的一定数量的连续元素中的最后一个？

我目前正在尝试为每个标题的边框上色彩虹中的不同颜色，以使此HTML的第一个标题的样式为maroon，第二个orange，第三个olive：

<h2 class="rh">Heading 1</h2>
<p>Text</p>
<h2 class="rh">Heading 2</h2>
<p>Text</p>
<h2 class="rh">Heading 3</h2>
<p>Text</p>

我当前的CSS是这个。但是，这实际上是无效的。有没有更好的办法？

.rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh {
    border-bottom: 2px solid maroon;
}
.rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh {
    border-bottom: 2px solid orange;
}
.rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh {
    border-bottom: 2px solid olive;
}
.rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh {
    border-bottom: 2px solid green;
}
.rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh {
    border-bottom: 2px solid navy;
}
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh {
    border-bottom: 2px solid purple;
}

最佳答案

编辑#a_lot：

正如我们在注释中确定的那样，不需要类名，我们可以将其用于大多数主流浏览器，并且MSIE> = 9：

.r > h2:nth-of-type(6n+1){
    border-bottom: 2px solid maroon;
}
.r > h2:nth-of-type(6n+2){
    border-bottom: 2px solid orange;
}
.r > h2:nth-of-type(6n+3){
    border-bottom: 2px solid olive;
}
.r > h2:nth-of-type(6n+4){
    border-bottom: 2px solid green;
}
.r > h2:nth-of-type(6n+5){
    border-bottom: 2px solid navy;
}
.r > h2:nth-of-type(6n+6){
    border-bottom: 2px solid purple;
}

以下答案是错误的，但仍作为错误原因的参考：类似于p.classname:nth-of-type(3n)的选择的段落既是第3个p元素又具有类classname，而不是每个第3个p正如我所期望的那样，具有类classname。



在不远的将来，您可以在普遍使用MSIE 9和淘汰MSIE6 / 7/8的那一刻使用nth-of-type。所以，就目前而言：您已摆脱锁定。