Question

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

因此，例如，在下面的DOM结构中，我想向“id1”添加一个选择器，以便它可以设置所有后代的样式，但不包括“id4”。换句话说，div对应于class1和class2。我事先知道id1和id4，但我不知道class1和class2（链中可能还有更多，直到我点击“id4”）。我希望将样式应用于与class1和class2相对应的div，但没有别的。基本上应用程序div已经将它们的位置设置为某个东西，并且我希望能够保持原样，只需修改对应于class1和class2的div的位置。

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

java.lang.Character.getNumericValue

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

Answer 1

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

尝试类似：

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

您还可以使用attribute selectors对后代选择器进行更具体的操作，然后重置目标元素：

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

Answer 2

首先，ID不是最好的例子，因为它们的性质，它们将是独特的和可预测的 - 恰恰不是您在示例中描述的内容。

但无论如何，在这里你是如何做到的 - 你不会得到一个＆＃34;直到＆＃34;选择器在css中，但你可以检查子元素。这意味着您既可以为每个不是＃id的idle或其子元素设置样式，也可以为每个元素设置样式，然后为每个＃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;
}

Answer 3

解决此问题的最佳方法是使用css psuedo选择器。 documentation。解决问题的一种方法是为所有类提供id的类名，然后执行.id:not(:last-child)。可能有更好的方法来解决它，但这将是我的方法： - ）

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

3 个答案: