如果某个孩子至少存在一次，请选择一些孩子

Question

我试图只选择具有类别c的div，至少有一个类别b的兄弟姐妹。下面是一些例子：

// Case1 
<div class="a"> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
</div> 

// Case2 
<div class="a"> 
    <div class="c"></div> 
    <div class="c"></div> 
    <div class="c"></div> 
</div> 

// Case3 
<div class="a"> 
    <div class="b"></div> 
    <div class="c"></div> //this one 
    <div class="b"></div> 
</div> 

// Case4 
<div class="a"> 
    <div class="c"></div> //this one 
    <div class="b"></div> 
    <div class="c"></div> //this one 
</div> 

我尝试以下规则：

.a > .b ~ .c { 
    background-color: red; 
} 

它适用于情况1 - 3，但第四例与C级的第一个div没有被选中。 AFAIK没有其他选择器可以帮助我，所以我在这里尝试我的运气。

PS：class a的div可以有3个以上的孩子。这些仅仅是例子而不是实际的用例。

Answer 1

由于没有以前的兄弟选择器，所以无法匹配出现在兄弟元素之前的元素，也不能匹配包含其他子元素的父元素的子元素，因为没有父亲选择器。您将需要一些不基于选择器的其他解决方法。

不要指望这在选择器-4中是可行的，除非你使用JavaScript来匹配和应用工具类到那些.c元素 - 在这种情况下，你可以通过利用jQuery的长期实现:has()（我刚写了一篇earlier today）：如果你想只使用CSS，你可以访问服务器端代码

$('.a:has(> .b) > .c') 

Answer 2

，你可以只添加一个额外的class像.contains-b的父元素或data-attribute像data-contains="b"并将其用作选择器。

.a[data-contains~=b] .c { 
 
    background-color: red; 
 
}

<div class="a" data-contains="b"> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
</div> 
 

 
<div class="a" data-contains="c"> 
 
    <div class="c"></div> 
 
    <div class="c"></div> 
 
    <div class="c"></div> 
 
</div> 
 

 
<div class="a" data-contains="b c"> 
 
    <div class="b"></div> 
 
    <div class="c">this one</div> 
 
    <div class="b"></div> 
 
</div> 
 

 
<div class="a" data-contains="b c"> 
 
    <div class="c">this one</div> 
 
    <div class="b"></div> 
 
    <div class="c">this one</div> 
 
</div>