Question

如何选择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没有这种功能，对吧？

Somethink可能可用：https://css-tricks.com/extremely-handy-nth-child-recipes-sass-mixins/

编辑：为什么要这样：CMS系统将此“第一个顶部标题”作为文档的标题（帖子，页面，...）。但是它将其留在页面中。然后它两次显示标题-一次作为帖子标题，一次在正文中。 JavaScript已删除。最高h*级别可能会有所不同。

Answer 1

我发现了一些东西。 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,
...

有一个陷阱-当前can only have a single "simple selector"的:not()。如果它支持更多，那么即使没有:has也可以实现。

对未来读者的问候，我希望它能解决。现在，我保持开放状态，也许有人会使用CSS 3.1。

Answer 2

主要问题是CSS中没有先前的选择器。例如，我们可以获得第一个h2，但是如果以后找到h1，我们将没有选择器可以倒退。

这是使用CSS可以做的最好的事情。您可以将所有元素隐藏在所需的元素之后（因此所需的元素是最后一个可见的元素），但是您不能对先前的元素进行相同的操作。

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  color:red;
}


h1:first-of-type ~ * {
  display:none;
}
h2:first-of-type ~ *:not(h1) {
  display:none;
}
h3:first-of-type ~ h4 {
  display:none;
}


.container {
 border:1px solid;
}

<div class="container">
  <h3>text 3</h3>
  <h1>text 1*</h1>
  <h2>text 2</h2>
  <h1>text 1</h1>
</div>
<div class="container">
  <h3>text 3</h3>
  <h2>text 2*</h2>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h3>text 3</h3>
  <h3>text 2</h3>
  <h2>text 2*</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h1>text 3*</h1>
  <h3>text 2</h3>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>

然后，您可以结合一个小的JS代码以仅保留所需的元素：

$('h3:first-of-type').prevAll('h4').hide();
$('h2:first-of-type').prevAll('*:not(h1)').hide();
$('h1:first-of-type').prevAll('*').hide();

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  color:red;
}


h1:first-of-type ~ * {
  display:none;
}
h2:first-of-type ~ *:not(h1) {
  display:none;
}
h3:first-of-type ~ h4 {
  display:none;
}

.container {
 border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h3>text 3</h3>
  <h1>text 1*</h1>
  <h2>text 2</h2>
  <h1>text 1</h1>
</div>
<div class="container">
  <h3>text 3</h3>
  <h2>text 2*</h2>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h3>text 3</h3>
  <h3>text 2</h3>
  <h2>text 2*</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h1>text 1*</h1>
  <h3>text 2</h3>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>

我曾经将元素隐藏起来，但是您可以对其他样式进行相同操作：

$('h3:first-of-type').prevAll('h4').addClass('initial');
$('h2:first-of-type').prevAll('*:not(h1)').addClass('initial');
$('h1:first-of-type').prevAll('*').addClass('initial');

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  color:red;
  font-family:cursive;
  font-style:italic;
}


h1:first-of-type ~ *,
h2:first-of-type ~ *:not(h1),
h3:first-of-type ~ h4,
h1.initial,h2.initial,h3.initial,h4.initial{
  color:initial;
  font-family:initial;
  font-style:initial;
}

.container {
 border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h3>text 3</h3>
  <h1>text 1*</h1>
  <h2>text 2</h2>
  <h1>text 1</h1>
</div>
<div class="container">
  <h3>text 3</h3>
  <h2>text 2*</h2>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h3>text 3</h3>
  <h3>text 2</h3>
  <h2>text 2*</h2>
  <h4>text 1</h4>
</div>
<div class="container">
  <h1>text 1*</h1>
  <h3>text 2</h3>
  <h2>text 2</h2>
  <h4>text 1</h4>
</div>

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

2 个答案: