[英]Apply CSS rule to a group of elements between two other elements
<div class="aaa">
<blockquote>...</blockquote>
<p>...</p>
<div class="bbb">...</div>
<div class="ccc">...</div>
</div>
Is there a way to apply display: none
to everything between aaa
and bbb
?有没有办法将
display: none
应用于aaa
和bbb
之间的所有内容? That is, to <blockquote>
and <p>
.也就是说,到
<blockquote>
和<p>
。 (The contents is not limited to blockquote
and p
. For example, it could be <div>
or <pre>
.) (内容不限于
blockquote
和p
。例如,它可以是<div>
或<pre>
。)
You will need two rules:您将需要两条规则:
.aaa > * { display:none; }.aaa >.bbb, .aaa >.bbb ~ * { display:block; }
<div class="aaa"> <blockquote>block</blockquote> <p>ppp</p> <div class="bbb">bbb</div> <div class="ccc">ccc</div> </div>
If you want to use JavaScript (for example to apply this change programmatically), you can get all the children of the element with class aaa
and then iterate over them applying the style, stopping when you reach the one with class bbb
.如果您想使用 JavaScript(例如,以编程方式应用此更改),您可以获取类为
aaa
的元素的所有子元素,然后迭代它们应用样式,当您到达类为bbb
的元素时停止。
let parent = document.querySelector('.aaa');
for (let child of parent.children) {
if (child.classList.contains('bbb'))
break;
child.style.display = 'none';
}
#xxx{ display:none; }
<div class="aaa"> <div id='xxx'> <blockquote>.zzz..</blockquote> <p>.yyy..</p> </div> <div class="bbb">...</div> <div class="ccc">...</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.