Html 最高级别的第一个标题的CSS选择器？

如何选择DOM中最高的

h*

元素中的第一个

差不多

(h1, h2, h3, h4, h5, h6):first-of-ordered-set

也就是说，如果DOM树按此顺序具有

h2

，

h3

，

h1

，

h2

，

h1

，它将选择第一个

h1

如果DOM有

h3

，

h3

，

h2

，

h2

，

h4

，它会选择第一个

h2

让我们假设

h*

元素没有嵌套

我怀疑CSS没有那种能力，对吧

有些人认为可能有用：

---

编辑：为什么我想要它：CMS系统将此“第一个顶部标题”作为文档的标题（帖子、页面等）。但它会留在页面上。然后它会显示标题两次，一次作为文章标题，一次在正文中。JavaScript被删除。顶部的

h*

级别可能不同。

我发现了一些东西。CSS做不到这一点还没有。

W3C正在起草新功能：

.post-content:has(h1, h2, h3, h4, h5, h6)

连同

：not（）

，这将允许我需要：

.post-content:has(h1) h1:first-of-kind,
.post-content:not(:has(h1)) h2:first-of-kind,
.post-content:not(:has(h1,h2)) h3:first-of-kind,
...

有一个陷阱-当前的

：not（）

。如果它支持更多，那么即使没有

：has

，也可以实现

向未来的读者问好，我希望它能成功。

---

现在，我把这个问题留待讨论，也许有人会用CSS 3.1解决。

主要问题是我们在CSS中没有以前的选择器。例如，我们可以得到第一个

h2

，但是如果以后我们找到一个

h1

，我们就不能有一个向后的选择器

以下是使用CSS可以做到的最好的方法。可以隐藏所需元素之后的所有元素（因此所需的元素是最后可见的元素），但不能对前面的元素执行相同的操作

h1：第一种类型，
h2：第一种，
h3：第一种，
h4：第一种{
颜色：红色；
}
h1：第一种类型~*{
显示：无；
}
h2：第一种~*：非（h1）{
显示：无；
}
h3:h4型的第一个{
显示：无；
}
.集装箱{
边框：1px实心；
}

文本3
文本1*
文本2
文本1
文本3
文本2*
文本2
文本1
文本3
文本2
文本2*
文本1
文本3*
文本2
文本2
文本1

CSS有循环吗？我正在寻找纯CSS解决方案。纯CSSI没有办法，但不确定它是否能涵盖所有情况……CSS没有办法，但你想实现什么？@Ibu，我添加了动机重要提示：

：has（）

将在JavaScript中提供。在WICG的讨论中，我明确要求我们推动浏览器来实现它。没错，CSS只是向前推进，我相信这与性能有关。CSS可能只遍历树一次，并对元素名、类名和ID进行索引等优化。我相信这也是围绕

has（）

的争议的原因。