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