CSS选择器除了粒子类

时间:2016-12-15 18:01:06

标签: html css

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

<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;},只有在我的情况下,它不可能知道它是什么颜色。

4 个答案:

答案 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)

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

&#13;
&#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;
&#13;
&#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)