html - 相邻兄弟匹配显示为 : none 的元素

Question

我有相当简单的 CSS 格式 - 或者我是这么认为的!

我有两个相邻的元素，第一个可以隐藏。我使用 display: none 来隐藏它。

第二个元素始终存在。

我需要在两者之间保持一个空格，所以我认为下面的 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>

Answer 1

将 .hidden + .visible 更改为 :not(.hidden) + .visible

CSS 将继续应用该类格式，无论其显示:设置如何，因为该元素仍然存在。并根据this answer我相信普通的 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');">