CSS Not Selector：选择除元素内部以外的所有内容

Question

我有课程＆＃34; item＆＃34;出现在整个页面中。整个页面的样式是相同的。但是，当它出现在具有类＆＃34; group＆＃34;的元素中时，我不希望应用样式。我真的很喜欢使用：not pseudo selector，所以我不必为这种特殊情况创建另一种风格。

CSS

.item, .group div:not(.item){
    color:red;
}

HTML

<div class="item">I have style!</div>
<div class="group">
    <div class="item">No style for me, thanks!</div>
</div>

Answer 1

您可以使用initial值并按以下方式执行操作：

＆＃13;

＆＃13;

.item {
    color:red;
}
.group div.item {
    color:initial;
}

＆＃13;

<div class="item">I have style!</div>
<div class="group">
    <div class="item">No style for me, thanks!</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这不是一个完美的解决方案，但您可以定位.group div并说出类似的内容：

div:not(.group) .item {
    color: red;
}

这是一个小提琴：http://jsfiddle.net/jqxgetsj/

唯一的限制是你必须有直接的父选择器或者更具针对性的东西。

Answer 3

CSS中没有父选择器，因此您无法进入内部。虽然有一个子选择器，但在你的例子中可以很好地使用它：

＆＃13;

＆＃13;

body > .item {
    color:red;
}

＆＃13;

<div class="item">I have style!</div>
<div class="group">
    <div class="item">No style for me, thanks!</div>
</div>

＆＃13;

＆＃13;

＆＃13;