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：a级的div可以有3个以上的孩子。这些只是示例而非实际用例。

Answer 1

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

除非你使用JavaScript来匹配并将实用程序类应用于那些.c元素，否则不要指望它在selectors-4中是可行的 - 在这种情况下，你今天可以通过利用jQuery的long来实现这一点。常设实施:has()（我刚才写的earlier today）：

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

Answer 2

如果您只想使用CSS并且可以访问服务器端代码，则只需向父元素添加额外的class .contains-b或data-attribute { {1}}并将其用作选择器。

＆＃13;

data-contains="b"

＆＃13;

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

＆＃13;

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

2 个答案: