最高级别的第一个标题的CSS选择器？
最高级别的第一个标题的CSS选择器？
提问于 2018-07-28 06:48:07
如何选择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没有那样的能力，对吧？
一些人认为可能有用：https://css-tricks.com/extremely-handy-nth-child-recipes-sass-mixins/
编辑:为什么我想要它: CMS系统将这个“第一个顶部标题”作为文档的标题(帖子、页面等)。但它会把它留在页面上。然后它将标题显示两次-一次作为帖子标题，另一次在正文中。JavaScript将被删除。顶级h*级别可能会有所不同。
回答 1
Stack Overflow用户
发布于 2018-07-28 07:41:39
主要的问题是我们在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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51566452
复制相关文章
相似问题