一个简单的示例:选择具有类bar且没有祖先类foo的元素:
<div>
<div class="foo">
<span class="bar">HELLO</span>
<div>
<span class="bar">HELLO</span>
</div>
尝试了样式类:
:not(.foo) .bar {
}
也尝试过:
.bar:not(.foo .bar)
不起作用。实际的代码非常复杂,因此如果不使用:not,请不要使用此特定的简单示例提供其他解决方案。
答案 0 :(得分:0)
现在无法使用:not
或:has
伪类来做您想做的事情。根据文档:
否定伪类:not(X)是一种功能符号,它以简单的选择器(不包括否定伪类本身)为参数。它表示一个没有参数表示的元素。
这意味着您只能使用诸如:not(p)
,:not(.foo)
之类的特定元素,但不能添加选择器查询。
好,让我们看看如何构建解决方案。首先,我们需要选择所有具有.bar
类的元素,而不是父级具有.foo
类的元素。
因此,运算符parent > element
帮助我们选择具有特定父级的元素,而未选择不是直接属于指定父级的子级的元素。我们知道element
是具有.bar
类的任何元素,而parent
将是没有.foo
类的任何元素。因此,我们有了:not(.foo) > .bar
这个解决方案将只影响.foo
的直接子级。如果您有一个像.foo > .deep > .bar
中的子孩子,那么这将不会受到影响,如下所示:
:not(.foo) > .bar {
background: blue;
}
<div>
<div class="foo">
<span class="bar">FOO > BAR</span>
<div class="deep">
<span class="bar">FOO > DEEP > BAR</span>
</div>
</div>
<div class="foo">
<span class="bar">FOO > BAR</span>
</div>
<div class="aux">
<span class="bar">AUX > BAR</span>
</div>
<span class="bar">BAR</span>
</div>
如果上一个示例不是您的答案,那么,您需要找到一种解决方法。例如,我们可以使用JS插入新的辅助类foo-bar
,该类将插入到所有以.bar
为祖先的.foo
元素中(不仅是直接父元素)。然后使用:not(.foo-bar)
仅获得.bar
类的元素,例如以下代码片段:
$('.foo').find('.bar').each(function() {
$(this).addClass('foo-bar');
});
.bar:not(.foo-bar) {
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="foo">
<span class="bar">FOO > BAR</span>
<div class="deep">
<span class="bar">FOO > DEEP > BAR</span>
</div>
</div>
<div class="foo">
<span class="bar">FOO > BAR</span>
</div>
<div class="aux">
<span class="bar">AUX > BAR</span>
</div>
<span class="bar">BAR</span>
</div>
答案 1 :(得分:-1)
您可以尝试(仅适用于直接父母,如果不是问题,请按照Teocci的建议使用脚本):
:not(.foo) > .bar {}
子组合器(>)放在两个CSS选择器之间。它仅匹配第二个选择器匹配的元素,这些元素是第一个选择器匹配的元素的子元素。
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator