后代的 CSS 选择器，直到遇到某个标签

Question

我想知道是否有一个CSS选择器可以用来选择所有的后代，直到遇到某个标签。

因此，例如，在下面的 DOM 结构中，我想向“id1”添加一个选择器，以便它可以为所有后代设置样式，但不包括“id4”。也就是class1和class2对应的div。我事先知道 id1 和 id4，但我不知道 class1 和 class2(在我点击“id4”之前，链中可能还有更多)。我希望将样式应用于对应于 class1 和 class2 的 div，但仅此而已。基本上应用程序 div 已经设置了它们的位置，我希望能够保持原样，只需修改对应于 class1 和 class2 的 div 的位置。

理想情况下，我希望避免列出我正在使用的所有 div，因为该应用程序在 ID“deep-nesting-of-known-divs-here”下有相当多的 div

<div id="id 1">
   <div class="class1">
       <div class="class2">
           <div id="id4">
               <div id="deep-nesting-of-known-divs-here">
               </div>
           </div>
       </div>
   </div>
</div>

原因是我在某个站点的 Safari 上遇到了一个奇怪的问题。我有一个将 iframe 注入(inject)页面的扩展。注入(inject) iframe 后，该页面似乎正在运行导致 id2 和 id3 在 id1 和 id4 之间注入(inject)的脚本。因此，iframe 无法正常显示。

Answer 1

首先，ID 不是最好的例子，因为由于它们的性质，它们将是唯一的和可预测的——恰恰不是你在你的例子中描述的。

但无论如何，这是您的操作方式 - 您不会在 css 中获得“until”选择器，但您可以检查子元素。这意味着您可以为每个不是 #id4 或其子元素的元素设置样式，或者为每个元素设置样式，然后为每个 #id4 或其子元素重置样式:

/* style every div element that's not #id4 or a child of it */

#id1 :not(#id4) div:not(#id4) {
  background-color: red;
}

---

/* style every div, then reset divs that are #id4 or a child of it */

#id1 div {
  background-color: red;
}

#id1 #id4, #id1 #id4 div {
  background-color: transparent;
}