纯CSS能否选中出现在另一元素后任意位置的HTML元素？

核心结论 #

不能。不存在纯CSS方案可以实现跨任意DOM层级、匹配文档流中位于指定元素之后的任意关系元素的需求。

现有CSS选择器的能力边界 #

目前CSS选择器仅支持定位三类关系的元素，没有你需要的跨任意层级、跨分支的“后续元素”匹配能力：

• 兄弟元素：通过+（相邻兄弟）、~（通用兄弟）选择器，仅能匹配同一父元素下、位于参照元素之后的同级节点
• 子元素：通过>选择器，仅能匹配参照元素的直接下一代节点
• 后代元素：通过空格分隔的后代选择器，仅能匹配嵌套在参照元素内部的所有下级节点

所有原生CSS选择器的匹配逻辑都无法做到：

1. 从参照元素向上回溯任意层级的祖先节点
2. 回溯到对应层级后，再向下匹配其他分支中、文档流位置在参照元素之后的节点

也就是说你提到的侄辈、甥辈、表亲、远房亲属、叔祖辈这类跨分支、跨层级的元素，都没有通用CSS选择器可以直接命中。
你提到的两个限制条件——不知道元素间精确层级关系、不知道目标元素数量——进一步排除了硬编码固定层级选择器的可能：哪怕你针对某一个固定DOM结构写出了匹配规则，只要层级发生变动，规则就会失效，完全不具备通用性。

示例场景验证 #

你给出的三个测试场景，不存在通用选择器可以一次性覆盖：

Example 1 - Niece（侄辈场景）
<div>
  <h2>2</h2>
  <div>
    <h1>1</h1>
  </div>
</div>

Example 2 - Cousin（表亲场景）
<div>
  <div>
    <h2>2</h2>
  </div>
  <div>
    <h1>1</h1>
  </div>
</div>

Example 3 - Granduncle（叔祖辈场景）
<div>
  <div>
    <div>
      <h2>2</h2>
    </div>
  </div>
  <h1>1</h1>
</div>

如果硬编码固定层级，你可以针对单个场景写出匹配规则，比如第一个场景可以用h2 ~ div > h1命中h1，但这类写法完全依赖固定DOM结构，不符合你“不知道精确层级关系”的前提。

替代实现方案 #

如果要实现这个需求，只能借助JavaScript：

1. 先获取参照元素（所有<h2>）和待匹配目标元素（所有<h1>）
2. 用原生Node.compareDocumentPosition()API判断两个节点的文档流位置关系，筛选出位于参照h2之后的h1
3. 给筛选出的h1添加统一的自定义类名
4. 通过CSS类选择器给这类元素添加样式

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