是否可以使用纯 CSS 选择出现在另一个 HTML 元素之后的任何地方的 HTML 元素？

Question

是否可以使用纯 CSS 选择出现在<h2>元素之后的任何/所有<h1>元素？

我已经梳理了所有 CSS 选择器和伪类的文档页面，并且无法确定是否可以选择出现在某些元素之后的某些元素，无论是在同一分支中还是在 HTML 标记的不同分支中。

似乎选择器和伪类旨在仅定位以下元素：

• 兄弟姐妹
• 孩子们
• 子孙

我需要寻找其他关系：

• 侄女
• 侄子
• 表亲
• 三代堂兄弟两次被移除
• 大叔们
• 等等。

这在逻辑上在树中的某个元素之后。 我从来都不知道：

• 确切的关系
• 我想选择多少个元素。

 Example 1 - Niece <div class="example"> <h2>2</h2> <div> <h1>1</h1> </div> </div> Example 2 - Cousin <div class="example"> <div> <h2>2</h2> </div> <div> <h1>1</h1> </div> </div> Example 3 - Granduncle <div class="example"> <div> <div> <h2>2</h2> </div> </div> <h1>1</h1> </div>

Answer 1

是否可以使用纯 CSS 选择出现在元素之后的任何/所有元素？

纯CSS？ 是的
浏览器支持？ 仅限Safari 和较新版本的 Chrome

使用:has()伪类，我们可以检查后代而不直接定位它们：

 :root { --good-browser-support: skyblue; --emerging-browser-support: coral; } .example :has(h2)+ :is(h1, * h1) { /* Ancestor to sibling */ color: var(--emerging-browser-support); } .example :has(h2)+* h1 { /* Ancestor to descendant */ color: var(--emerging-browser-support); } .example h2+h1 { /* Subsequent siblings */ color: var(--good-browser-support); } .example h2+* h1 { /* Nieces */ color: var(--good-browser-support); }

 Example 1 - Niece <div class="example"> <h2>2</h2> <div> <h1>1</h1> </div> </div> Example 2 - Cousin <div class="example"> <div> <h2>2</h2> </div> <div> <h1>1</h1> </div> </div> Example 3 - Granduncle <div class="example"> <div> <div> <h2>2</h2> </div> </div> <h1>1</h1> </div> Example 4 - Uncle <div class="example"> <div> <h2>2</h2> </div> <h1>1</h1> </div> Example 5 - Non-target: Prior Siblings <div class="example"> <h1>1</h1> <h2>2</h2> </div> Example 6 - Subsequent Siblings <div class="example"> <h2>2</h2> <h1>1</h1> </div> Example 7 - Non-target: Prior Niece <div class="example"> <div> <h1>1</h1> </div> <h2>2</h2> </div> Example 5 - Non-target: Prior Siblings shared parent <div class="example"> <div> <h1>1</h1> <h2>2</h2> </div> </div>

精简版：

 :is(.example :has(h2)+ :is(h1, * h1), .example :has(h2)+* h1, .example h2 + h1, .example h2 + * h1) { color: magenta; }

 Example 1 - Niece <div class="example"> <h2>2</h2> <div> <h1>1</h1> </div> </div> Example 2 - Cousin <div class="example"> <div> <h2>2</h2> </div> <div> <h1>1</h1> </div> </div> Example 3 - Granduncle <div class="example"> <div> <div> <h2>2</h2> </div> </div> <h1>1</h1> </div> Example 4 - Uncle <div class="example"> <div> <h2>2</h2> </div> <h1>1</h1> </div> Example 5 - Non-target: Prior Siblings <div class="example"> <h1>1</h1> <h2>2</h2> </div> Example 6 - Subsequent Siblings <div class="example"> <h2>2</h2> <h1>1</h1> </div> Example 7 - Non-target: Prior Niece <div class="example"> <div> <h1>1</h1> </div> <h2>2</h2> </div> Example 5 - Non-target: Prior Siblings shared parent <div class="example"> <div> <h1>1</h1> <h2>2</h2> </div> </div>