如何在EPUB中用CSS2.1定位同class组内的最后一个p元素？

需要在EPUB3环境下，使用CSS2.1兼容的选择器（禁止使用:has()这类现代选择器），定位所有连续的p.special元素分组里的最后一个。对应的HTML结构如下：

<body>
  <p class="special">A</p>
  <p class="special">B</p> <!-- 需定位的元素 -->

  <h1>Aloha from Hawaii</h1>

  <p class="special">C</p>
  <p class="special">D</p>
  <p class="special">E</p> <!-- 需定位的元素 -->

  <div>Money everywhere...</div>

  <p class="special">F</p>
  <p class="special">G</p> <!-- 需定位的元素 -->

  <p class="boring">H</p>

  <p class="special">I</p> <!-- 需定位的元素 -->

  <p class="boring">J</p>
</body>

此前有一个无效方案，它错误地选中了分组的第一个元素而非最后一个：

p.special:not(.special + .special) {
  color: red;
}

可行的CSS2.1实现方案 #

由于CSS2.1不支持:has()，我们可以通过「先给所有目标元素设置样式，再给非最后一个元素重置样式」的思路实现：

1. 先对所有p.special应用目标样式
2. 使用相邻兄弟选择器+，给后面紧跟另一个p.special的p.special重置样式，剩余的就是每个连续分组的最后一个元素

对应的CSS代码：

/* 给所有p.special设置目标样式 */
p.special {
  color: red;
  /* 可添加其他需要的样式 */
}

/* 给后续还有同class元素的节点重置样式，排除非最后一个 */
p.special + p.special {
  color: inherit; /* 恢复为父元素文本颜色，或设置为默认样式 */
  /* 同步重置其他已设置的样式 */
}

这种方法完全基于CSS2.1的选择器特性，兼容绝大多数现代EPUB3阅读器。

内容的提问来源于stack exchange，提问作者Slevin