我正在尝试选择包装器中的每个元素,除了其中一个子元素中的元素。考虑一下:
<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;}
,只有在我的情况下,它不可能知道它是什么颜色。
答案 0 :(得分:2)
将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>
答案 1 :(得分:1)
如果你按正确的顺序排列,你可以得到这个:
.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])
答案 2 :(得分:0)
我建议:
.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()
)伪类的无效选择器。
答案 3 :(得分:0)
纯CSS似乎没有提供一个好的解决方案 - 至少不是我能想到的。
not
的问题是它只适用于“简单选择器”,这基本上意味着它应用的选择器不能包含像空格这样的组合器。
对于简单的情况,您可以执行很多人建议的操作 - 只需要选择.ignore *
的第二条规则,然后取消.wrapper *
规则的操作。但是,如果.wrapper *
规则做了很多,或者如果没有.wrapper *
规则得到的确切状态不清楚(可能由外部资源设置),那么这不一定是切实可行的。
你可以做的是使用JavaScript(或类似的)将.ignore类传播到它的所有后代,然后只使用:not(.ignore)