javascript - 基于另一个 div 设置父 div 的样式

Question

我正在寻找一种将 CSS 样式应用于 div2 的解决方案，仅当 div1 可见时。我该怎么做？

<div class="div1"></div>
<div class="div2"></div> 

<style>
    /* when div1 is NOT present */
    .div2 {
        margin: 100px auto 100px auto;
    }

    /* when div1 IS present */
    .div2 {
        margin: 0 auto 100px auto;
    }
</style>

Answer 1

无需Javascript；您可以使用 CSS“兄弟”选择器来实现这一点:

.div2 {
    margin: 100px auto 100px auto;
}

.div1 + .div2 {
    margin: 0 auto 100px auto;
}

当然，这仅适用于 .div1 元素不存在于 DOM 中的情况(根据代码示例中的注释)。如果您想在 div1 存在但隐藏时执行此操作，则需要使用 JS。