用于变量、未知数量的"nested"元素的 CSS 选择器

Question

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

我的问题是，当每个<p>元素都嵌套在不同数量的元素中时，我无法使其工作，如示例中所示。

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

body * :not(.test) p {

似乎我需要一个通配符，它不仅代表一个随机元素，而且代表未知数量的随机元素。CSS中存在这样的事情吗？(请注意，我无法在实际情况中编辑 HTML，或者除了 CSS 之外的任何内容(

JSFiddle 示例(Foo应保持黑色(

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

<div>
  <span>
    <tr>
      <span class="test">
        <p>Foo</p>
      </span>
    </tr>
    <div>
      <tr>
        <li>
          <p>Bar</p>
        </li>
      </tr>
    </div>
    <p>FooBar</p>
  </span>
</div>

Answer 1

我正在尝试通过使用:not()选择器更改某种类型的所有元素(在示例中为 <p> (的属性，除了那些是具有特定类的任何元素(在示例中为 .test(的直接子元素的属性。

既然你说的是直接子运算器，你只需要添加子运算器(>(：

body * :not(.test) > p

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

body * :not(.test) p

这对于保持.test p子元素为黑色不起作用，因为p也是其他(非排除(元素的后代，例如tr和body。因此，:not(.test)尝试失败，因为它仅涵盖几种匹配可能性之一。

但是，当您从后代切换到只是子代时，在这种情况下，可能性缩小到只有一个匹配项。