将 CSS 规则应用于两个其他元素之间的一组元素

Question

<div class="aaa">
  <blockquote>...</blockquote>
  <p>...</p>
  <div class="bbb">...</div>
  <div class="ccc">...</div>
</div>

有没有办法将display: none应用于aaa和bbb之间的所有内容？ 也就是说，到<blockquote>和<p> 。 （内容不限于blockquote和p 。例如，它可以是<div>或<pre> 。）

Answer 1

您将需要两条规则：

 .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>

Answer 2

如果您想使用 JavaScript（例如，以编程方式应用此更改），您可以获取类为aaa的元素的所有子元素，然后迭代它们应用样式，当您到达类为bbb的元素时停止。

let parent = document.querySelector('.aaa');

for (let child of parent.children) {
    if (child.classList.contains('bbb'))
        break;

    child.style.display = 'none';
}

Answer 3

 #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>