风格基于另一个div的父分区

我正在寻找一种解决方案，以便只有当div1可见时才将CSS样式应用于div2。我怎样才能做到这一点？风格基于另一个div的父分区

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

来源

2016-05-22 user2513528

没有使用Javascript的jQuery可见选择;您可以使用CSS“兄弟”选择实现这一目标：

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

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

当然当.div1元素不存在于DOM（按你的代码示例中的注释）这仅适用。如果你想这样做，当div1存在但隐藏，那么你将需要使用JS。

来源

2016-05-22 11:08:53

没问题，很乐意帮忙。 –

真是太遗憾了，我们不能使用减号找到兄弟姐妹之前，而不是只有之后！ –

@ Le-roy这听起来像个不错的主意，但它没有多大意义。如果你发现自己需要知道以前的元素状态是什么，那么你正从错误的天使接近问题。看看我的答案。 – Narxx

-1

一个小的jQuery总是有帮助，使用：需要

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

来源

2016-05-22 11:08:39 Varun

为什么downvote，谨慎解释？ – Varun

做这种行为的正确方法是设置自己的顶级父（基类可能会更<body>，并从那里你可以设置你想要的任何行为，纯粹是由CSS。

.menu_open .div1 { 
 
    display: block; 
 
} 
 

 
.menu_open .div2 { 
 
    display: none; 
 
} 
 

 
.div1 { 
 
    display: none; 
 
} 
 

 
.div2 { 
 
    display: block; 
 
}

<body class="menu_open"> 
 
    <div class="div1">Div1</div> 
 
    <div class="div2">Div2</div> 
 
</body>

现在你可以使用JS的<body>类的状态之间切换，并且可以设置复杂的行为，任何其他元素，独立于其他兄弟姐妹。

来源

2016-05-22 11:15:10 Narxx

风格基于另一个div的父分区

回答

相关问题