CSS:选择某些类别中没有祖先的元素

时间:2019-05-16 00:08:24

标签: html css google-chrome

一个简单的示例:选择具有类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,请不要使用此特定的简单示例提供其他解决方案。

2 个答案:

答案 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