如果只存在于其他div中，如何显示div

Question

我想在 #header 中显示 .tel ，只有它存在于 #switcher 中。 基本情况：

<div id="switcher"><div class="tel"></div></div>
<div id="header"><div class="tel"></div></div>

但系统中的用户可以关闭 #switcher 中的 .tel 。之后，代码就像这样：

<div id="switcher"></div>
<div id="header"><div class="tel"></div></div>

在这种情况下，我想在 #header 中隐藏 .tel 。

我知道如何使用jquery，但是我可以用css或scss来做吗？

Answer 1

这个解决方案取决于<header> <div id="switcher"> <div class="tel"></div> </div> <div class="tel"></div> </header> 需要在页面上显示的位置，但是......如果你很狡猾，你可以重新订购这样的标记：

header .tel {
display: none;
}

header #switcher .tel,
header #switcher ~ .tel {
display:block;
}

然后使用以下样式规则：

{{1}}