Question

在这个html中：

<div class="main">

    <div class="container1">
        <div class="div_1">
            ....
        </div>
    </div>

    <div class="container2">
        <div class="div_2">
            ....
        </div>
    </div>

</div>

我想像这样定位div_2

.main .container1 .container2 .div_2 {}

这意味着目标也必须通过container1 div才能应用css。

为什么呢？这可能是一个非常有用的技巧，而不使用任何脚本例如，当div_2存在时页面上的container1定位，而另一页上则不存在，因此它不起作用。这可能吗？

Answer 1

使用相邻的兄弟选择器（+）：

.main .container1 + .container2 .div_2 { 
  background-color: aqua;
}

<div class="main">
    <div class="container1">
        <div class="div_1">div_1</div>
    </div>
    <div class="container2">
        <div class="div_2">div_2</div>
    </div>
</div>

上面的选择器说：目标.div_2，它是.container2的后代，紧跟其兄弟.container1，后者是{{1}的后代}

参考文献：

8.3.1 Adjacent sibling combinator（.main）
8.3.2 General sibling combinator（+）
CSS Selectors Level 3

Answer 2

.main .container1 .container2 .div_2 {}如果两个.container2都嵌套在.container1中，则只会定位.div_2。

你最接近的是兄弟选择器。

.container1~.container2 .div_2

通过跳过div来定位课程？

2 个答案: