9

使用 CSS3，有没有办法选择不在某个类的元素中的元素？例如，在下面的示例中，如何选择不在(ie, but not )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>
...
4

4 回答 4

3

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

我不知道任何伪选择器来测试所有父母的某些条件，所以我个人会使用这样的解决方法：

div {background: yellow;}
.bar {background: green;}
.foo .bar {background: yellow;} /*repeat original styles changed by .bar*/
于 2013-04-12T15:19:43.693 回答
1

如果.foo本身不是任意深

假设标签.foo 的深度是已知的body（您的问题仅表示内 .foo的任意深度，或者.bar不管 in 或 out 的任意深度.foo），那么类似以下代码的代码可以.bar为.foo. 对于第一个示例，我假设.foo是 的直接子级body，但如果不是，则必须稍微修改代码以适应适当的深度.foo（参见第二个示例）：

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

请参阅上述代码的小提琴。

这只有在.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 */
}

请参阅上述代码的小提琴。

于 2013-04-19T22:33:37.653 回答
0

不幸的是，让它工作的唯一方法是使用 :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 */
}
于 2013-04-12T15:08:41.073 回答
0

我会使用以下内容：

.bar {
    color:red;
}

.foo ~ .bar{
    color:green;
}

看这个演示：http: //jsfiddle.net/QR3kP/

于 2013-04-12T15:26:03.770 回答