相邻同级与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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-14 03:10:07
将.hidden + .visible :not(.hidden) + .visible的更改为
CSS将继续应用该类格式，而不管它的display:设置，因为元素仍然存在。根据this answer的说法，我相信没有任何方法可以让一个普通的CSS选择器来判断某个东西的显示是:没有，除非它是内联的。
所以让我们在: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');">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56118424
复制相关文章
相似问题