相邻同级与display: none匹配元素
相邻同级与display: none匹配元素
提问于 2019-05-14 03:02:10
我有相当简单的CSS格式化--或者我是这么想的！
我有两个相邻的元素，第一个可以隐藏。我使用display: none来隐藏它。
第二个元素总是存在的。
我需要在两者之间保留一个空格，所以我认为下面的CSS代码就足够了：
.hidden + .visible {
margin-left: 200px;
} 然而，似乎尽管第一个元素应用了display: so，选择器仍然匹配相邻的第二个元素(而不是第一个)，所以应用了边距。
除了觉得它很“奇怪”之外，我需要找到一种方法来保持两者之间的空间，但只有在两者都可见的情况下。
有什么想法吗？
这里有一个附带示例的代码片段。
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56118424
复制相关文章
相似问题