Question

我正在尝试选择包装器中的每个元素，除了其中一个子元素中的元素。考虑一下：

<div class="wrapper">
    <div class="this">
        <div class="that"></div>
    </div>
    <div class="foo">
        <div class="bar"></div>
        <div class="orange">
            <div class="ignore"></div>
        </div>
    </div>
    <div class="hello"></div>
    <div class="world">
        <div class="ignore">
            <div class="this"></div>
        </div>
    </div>
</div>

我想要做的是使wrapper内的所有内容的文字颜色为白色，但ignore内的元素除外。到目前为止，我得到的是.wrapper *:not(.ignore *)，但这不起作用。

编辑：我无法接受包含覆盖.ignore内颜色的解决方案，因为该颜色已预设，并且不受我的控制。也不可能知道预设中使用了哪种颜色。想象一下有一个body {color:blue;}，只有在我的情况下，它不可能知道它是什么颜色。

Answer 1

将color: #fff添加到.wrapper

然后，添加您想要的任何颜色.ignore

之后，请确保在样式表中 .ignore之后加载.wrapper 。

.wrapper { background: #131418; color: #fff; font-size: 25px } .ignore { color: #933 }

<div class="wrapper"> <div class="this"> <div class="that">wrapper</div> </div> <div class="foo"> <div class="bar">wrapper</div> <div class="orange"> <div class="ignore">ignore</div> </div> </div> <div class="hello">wrapper</div> <div class="world"> <div class="ignore"> <div class="this">ignore</div> </div> </div> </div>

Answer 2

如果你按正确的顺序排列，你可以得到这个：

＆＃13;

.wrapper {
  background: green;
}
.wrapper *:not(.ignore) {
  color: white;
}
.wrapper *, .wrapper .ignore *{
  color: red;
}

＆＃13;

<div class="wrapper">
    <div class="this">
        <div class="that">1</div>
    </div>
    <div class="foo">
        <div class="bar">2</div>
        <div class="orange">
            <div class="ignore">3</div>
        </div>
    </div>
    <div class="hello"></div>
    <div class="world">
        <div class="ignore">
            <div class="this">4</div>
        </div>
    </div>
</div>

＆＃13;

请注意，:not(...)已应用于当前元素，因此您无法使用 :not(something [some element inside])

Answer 3

我建议：

.wrapper div:not(.ignore) {
  color: white;
}

您发布的CSS选择器不起作用的原因 - 并且不应该起作用 - 是因为：

.wrapper *:not(.ignore *)

尝试选择不是.ignore元素后代的所有后代元素，而在您的问题中，您似乎只是尝试选择本身不属于.ignore类的元素

此外，:not()伪类：

...是一个功能表示法，它将简单选择器（不包括否定伪类本身）作为参数。它表示一个未被其参数表示的元素。

[强调 mmine，https://www.w3.org/TR/css3-selectors/#negation]。

一个'简单选择器'是：

...类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

[https://www.w3.org/TR/css3-selectors/#simple-selectors-dfn]

这似乎阻止使用组合器，白色空间，代表后代的选择;意味着你的选择器.ignore *是否定（:not()）伪类的无效选择器。

Answer 4

纯CSS似乎没有提供一个好的解决方案 - 至少不是我能想到的。

not的问题是它只适用于“简单选择器”，这基本上意味着它应用的选择器不能包含像空格这样的组合器。

对于简单的情况，您可以执行很多人建议的操作 - 只需要选择.ignore *的第二条规则，然后取消.wrapper *规则的操作。但是，如果.wrapper *规则做了很多，或者如果没有.wrapper *规则得到的确切状态不清楚（可能由外部资源设置），那么这不一定是切实可行的。

你可以做的是使用JavaScript（或类似的）将.ignore类传播到它的所有后代，然后只使用:not(.ignore)

CSS选择器除了粒子类

4 个答案: