选择不在某些元素内的元素

Question

使用CSS3，有没有办法选择不属于某个类的元素的元素？例如，在下面的示例中，如何选择不在class="bar"元素内的class="foo"元素（即id="2"但不是id="1"）？

<div class="foo">
  ... arbitrary depth ...
    <div class="bar" id="1">
      ...
    </div>
  ...
</div>
...
  <div class="bar" id="2">
    ...
  </div>
...

Answer 1

根据MDN，:not()会根据某些条件匹配一个元素，它不会返回“非元素”。

我不知道有任何伪选择者在某些情况下测试所有父母，所以我个人会使用这样的解决方法：

div {background: yellow;}
.bar {background: green;}
.foo .bar {background: yellow;} /*repeat original styles changed by .bar*/

Answer 2

如果.foo本身不是任意深

假设.foo 是body标记的已知深度（您的问题仅表示 .foo内的任意深度，或者对于.bar .foo而言，无论是.bar内还是其他内容），以下代码都可以为.foo内外的任意深度选择任何.foo。对于第一个示例，我假设body是.foo的直接子项，但如果不是，则必须稍微修改代码以适应{{1}的适当深度}（见第二个例子）：

body > :not(.foo) .bar,
body > .bar {
    /* styles */
}

See a fiddle for the above code.

这仅在.foo未嵌套太深时才实用，因为.bar定位必须与.foo以及之前任何级别更高级别相同。因此，例如，如果.foo是body的孙子，则需要以下内容：

body > * > :not(.foo) .bar, /* deeper levels checking for no .foo parent */
body > .bar, /* child level */
body > * > .bar { /* grandchild level; equal to .foo's level */
    /* styles */
}

See a fiddle for the above code.

Answer 3

不幸的是，使用它的唯一方法是使用：not语法并按元素或类名指定1层深度

这里是小提琴：http://jsfiddle.net/2V7Wc/

HTML

<div class="foo">
    <div class="bar" id="one">
    </div>
</div>
<div class="bar" id="two">
</div>

的CSS：

.bar:not(#one) {
   /* styles */
}

Answer 4

我会使用以下内容：

.bar {
    color:red;
}

.foo ~ .bar{
    color:green;
}

查看此演示： http://jsfiddle.net/QR3kP/