[英]Adjacent sibling matches elements with display: none
我的CSS格式相当简单-还是我想!
我有两个相邻的元素,其中第一个可以隐藏。 我已经使用显示:没有隐藏它。
第二个元素始终存在。
我需要在两者之间保持一个空间,所以我认为下面的CSS足够了:
.hidden + .visible {
margin-left: 200px;
}
但是,似乎第一个元素没有显示:没有应用显示,但选择器仍然与第二个元素匹配(而不是第一个),因此应用了边距。
除了发现它很“奇怪”之外,我还需要找到一种在两者之间保持空间的方法,但前提是两者都可见。
有任何想法吗?
有一个附带示例的代码段。
.container { margin: 50px; } .wrapper { background-color: aqua; display: flex; justify-content: flex-start; } .item { background-color: red; flex: 0 0 auto; height: 40px; width: 40px; } .hidden { display: none; } .visible { background-color: lime; } .hidden + .visible { margin-left: 200px; }
<div class="container"> <div class="wrapper"> <div class="item hidden">hidden</div> <div class="item visible">visible</div> </div> </div>
.hidden + .visible
更改为:not(.hidden) + .visible
CSS会继续采用该类格式,而不管其display:设置如何,因为该元素仍然存在。 根据这个答案,我相信普通的CSS选择器没有任何办法可以告诉显示的内容是:none,除非它是内联的。
因此,让我们在:not(.hidden)
使用它们的类名 。 见下文。
.container { margin: 50px; } .wrapper { background-color: aqua; display: flex; justify-content: flex-start; } .item { background-color: red; flex: 0 0 auto; height: 40px; width: 40px; } .hidden { display: none; } .visible { background-color: lime; } :not(.hidden) + .visible { margin-left: 200px; }
<div class="container"> <div class="wrapper"> <div class="item hidden">hidden</div> <div class="item visible">visible</div> </div> </div> <input type="button" value="Show/Hide" onclick="var cn=document.getElementsByClassName('item')[0].className; document.getElementsByClassName('item')[0].className=(cn=='item visible'?'item hidden':'item visible');">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.