用于变量，未知数量的“嵌套”元素的CSS选择器

Question

我正在尝试更改某种类型的所有元素的属性（在示例中为<p>），除了那些具有特定类的任何元素的直接子元素（在示例中，{{ 1}}），使用test选择器。

我的问题是，当每个:not()元素嵌套在不同数量的元素中时，我无法使其工作。如示例所示。

我的问题基本上归结为以下行中的通配符：

<p>

似乎我需要一个通配符，它​​不仅代表一个随机元素，而且代表未知数量的随机元素。 CSS中是否存在任何此类问题？ （请注意，我无法在实际情况下编辑HTML，或者除了CSS之外的其他任何内容）

JSFiddle Example （body * :not(.test) p { 应保持黑色）

Foo

body * :not(.test) p {
  color: blue;
}

Answer 1

  

我正在尝试更改某种类型的所有元素的属性（在示例中为<p>），除了那些具有特定类的任何元素的直接子元素（在示例中，{{ 1}}），使用.test选择器。

由于您正在谈论直接儿童，您需要添加的只是儿童组合器（:not()）：

>

您在原始代码中使用了后代组合：

body * :not(.test) > p

这不会使body * :not(.test) p 的{​​{1}}孩子变黑，因为p也是其他（非排除）元素的后代，例如.test }和p。因此tr尝试失败，因为它只涵盖了几种匹配可能中的一种。

然而，当您从后代切换到儿童时，可能性缩小到，在这种情况下，只有一个匹配。