获取基于兄弟姐妹的CSS Selector

Question

我有一张这样的dom树：

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

如果存在类b，是否有可以更改类a sub_a的元素的选择器？

Answer 1

正如评论中所提到的，如果没有JavaScript，您将无法完全达到预期的结果。 但是，您可以检查div.a是否为空，然后根据该样式设置相邻类的样式。

div.a:not(:empty) + .b {
  background-color: blue;
}

Demo

Answer 2

只有CSS才能满足您的要求。

你可以这样做：

＆＃13;

＆＃13;

.a:empty + .b {
   background: green;
}

.a + .b {
   background: red;
}

＆＃13;

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

<div class="a">
    <div class="sub_a"></div>
</div>
<div class="b">Test2</div>

＆＃13;

＆＃13;

＆＃13;

您也可以这样做：

＆＃13;

＆＃13;

.a > .b {
   background: green;
}

.a > .sub_a ~ .b {
   background: red;
}

＆＃13;

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

<div class="a">
    <div class="sub_a"></div>
    <div class="b">Test2</div>
</div>

＆＃13;

＆＃13;

＆＃13;