选择没有给定属性的子元素的子元素

Question

我需要选择元素的子节点，其中至少有一个子元素没有特定的属性。

e.g。给出这个HTML

<div class="x" id="p1">
  <div class="a" id="c1"></div>
  <div class="a" id="c2"></div>
  <div class="b" id="c3"></div>
</div>
<div class="x" id="p2">
  <div class="a" id="c4"></div>
  <div class="a" id="c5"></div>
  <div class="c" id="c6"></div>
</div>

我想选择＃div2的所有子节点（即＃c4，＃c5，＃c6），因为#div2不包含应用了类b的子节点。

或者反向选择可满足我的需求。 即选择任何元素的所有子元素，其中至少有一个子元素已经应用了b类（在上例中为＃c1，＃c2，＃c3）

对于后一个例子，我尝试使用.b~*，但这只选择应用了类b的节点之后的节点，而不是之前的节点。

我不确定这是否可以在CSS中使用。 如果它是100％不可能那么这是一个可接受的答案，我将不得不在JQuery中这样做（尽管如果可能我宁愿避免它）

Answer 1

不，你不能用css做到这一点。 CSS无法根据孩子选择元素。

但是使用javascript / jquery很容易实现。

例如：

$('.x:not(:has(.b)) div') to select the element.

Answer 2

以下是答案：CSS selector for "foo that contains bar"?

纯CSS无法做到这一点，你需要JavaScript。