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

【问题标题】：CSS selector for descendents till a certain tag is encountered后代的 CSS 选择器，直到遇到某个标签
【发布时间】：2016-04-28 05:07:23
【问题描述】：

我想知道是否有一个 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 注入页面的扩展程序。注入 iframe 后，页面似乎正在运行一个脚本，导致 id2 和 id3 在 id1 和 id4 之间注入。因此，iframe 无法正常显示。

【问题讨论】：

大多数样式应用于id4的祖先将被id4继承。您必须单独覆盖每个继承的样式。

标签： css

【解决方案1】：

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

但无论如何，这就是你的做法 - 你没有在 css 中获得“直到”选择器，但你可以检查子元素。这意味着您可以为每个不是 #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;
}

【讨论】：

我想我正在寻找上面的 (1) （/* 为每个不是 #id4 或其子元素的 div 元素设置样式 */）。你能告诉我它是如何阻止选择 #id4 的所有后代的吗？
@AshD：它选择所有没有id“id4”的div，在一个没有id“id4”的div中，在id为“id1”的div中。中心部分是关键元素，因为它可以防止 #id4 的所有子项被选中。
谢谢。我没有添加 + 票的声誉，否则我会有。再一次非常感谢你。我需要学习 CSS！

【解决方案2】：

您可能必须为所有后代设置样式，然后为 #id4 重置。

尝试类似：

#id1 div {
    color: red;
}
#id1 #id4 {
    color: black;
}

您还可以使用attribute selectors 为您的后代选择器获得更具体的信息，然后为目标元素重置：

#id1 [id^="id"] {
    color: red;
}
#id1 #id4 {
    color: black;
}

【讨论】：

谢谢。我不确定这是否对我来说是一个实用的解决方案，因为 id4 中有很多 div
如果您不知道在#id1 和#id4 之间需要定位的元素数量，这很实用。

【解决方案3】：

解决此问题的最佳方法是使用 css 伪选择器。 documentation。解决它的一种方法是给所有类的类名id，然后做.id:not(:last-child)。可能有更好的方法来解决它，但这是我的方法:-)

【讨论】：