Как выбрать последний из определенного количества последовательных элементов одного и того же класса?

Question

В настоящее время я пытаюсь закрасить границу каждого заголовка другим цветом в радуге, чтобы этот 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;
}

Answer 1

Редактировать #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, а не каждый третий p, который имеет класс classname, как я и ожидал.

---

В далеком будущем вы можете использовать nth-of-type примерно в тот момент, когда MSIE 9 обычно используется, а MSIE6 / 7/8 выходит на пенсию.Итак, на данный момент: вы вне замка.