如何仅用CSS选中每个<h1>标签后的最后一个<p>标签？

在无层级嵌套的HTML结构中，要给每个<h1>之后的最后一个<p>设置红色字体，有两种纯CSS方案可以实现：

方法1：使用CSS :has() 选择器（现代浏览器适用） #

这是最直接的方案，通过筛选后面没有跟随其他<p>元素的目标<p>来定位：

h1 ~ p:not(:has(~ p)) {
  color: red;
}

逻辑说明： #

• h1 ~ p：选中所有位于任意<h1>之后的<p>元素
• :not(:has(~ p))：排除掉后面仍有其他<p>的那些<p>，剩余的就是每个<h1>对应的最后一个<p>

方法2：反向覆盖法（兼容旧浏览器） #

如果需要兼容不支持:has()的浏览器，可以采用"先统一设置，再反向覆盖"的思路：

/* 先给所有h1后的p设置红色 */
h1 ~ p {
  color: red;
}

/* 把后面还有p的p的颜色还原为默认 */
h1 ~ p ~ p {
  color: initial;
}

逻辑说明： #

1. 第一行选择器会将所有<h1>之后的第一个及后续<p>都设为红色
2. 第二行选择器选中的是<h1>之后**前面已有至少一个<p>**的元素（也就是每个组里除最后一个之外的所有<p>），通过还原颜色，最终只有每个组的最后一个<p>保持红色

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