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

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

不幸的是不是，让它工作的唯一方法是使用 :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 */
}