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

我正在寻找一种解决方案，仅当

div1

可见时，才将CSS样式应用于

div2

。我该怎么做

<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>

/*当div1不存在时*/
.第2分部{
保证金：100px自动100px自动；
}
/*当div1出现时*/
.第2分部{
保证金：0自动100px自动；
}

使用jQuery的：visible选择器总是有帮助的

if($('.div1').is(':visible')) 
{    
     $('.div2').css('margin','0 auto 100px auto'); 
}
else
{
     $('.div2').css('margin','100px auto 100px auto');
}

---

使用jQuery的：visible选择器总是有帮助的

if($('.div1').is(':visible')) 
{    
     $('.div2').css('margin','0 auto 100px auto'); 
}
else
{
     $('.div2').css('margin','100px auto 100px auto');
}

---

不需要Javascript；您可以使用CSS“同级”选择器来实现这一点：

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

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

---

当然，这仅适用于DOM中不存在

.div1

元素的情况（根据代码示例中的注释）。如果您想在

div1

存在但隐藏时执行此操作，则需要使用JS。

无需Javascript；您可以使用CSS“同级”选择器来实现这一点：

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

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

---

当然，这仅适用于DOM中不存在

.div1

元素的情况（根据代码示例中的注释）。如果您想在

div1

存在但隐藏时执行此操作，那么您需要使用JS。

执行此类行为的正确方法是在其顶级父级上设置基类（甚至可以是

，从那里您可以完全通过CSS设置您想要的任何行为

.menu\u open.div1{
显示：块；
}
.menu_open.div2{
显示：无；
}
.1分部{
显示：无；
}
.第2分部{
显示：块；
}

第一组
第二组

执行此类行为的正确方法是在其顶级父级上设置基类（甚至可以是

），然后您可以完全通过CSS设置任何您想要的行为

.menu\u open.div1{
显示：块；
}
.menu_open.div2{
显示：无；
}
.1分部{
显示：无；
}
.第2分部{
显示：块；
}

第一组
第二组

没问题，很乐意帮忙。真遗憾，我们不能在之前而不是之后使用负号来查找兄弟姐妹！@Le roy这听起来是个不错的主意，但没有多大意义。如果你发现自己需要知道之前元素的状态，你从错误的角度来处理问题。看看我的答案。没问题，很高兴提供帮助。真遗憾，我们不能在之前而不是之后使用负号来查找兄弟姐妹！@Le roy这听起来是个不错的主意，但没有多大意义。如果你发现自己需要了解之前元素的状态，那么你从错误的角度来处理问题。看看我的答案。