Question

我有相当简单的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>

Answer 1

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

CSS将继续应用该类格式，而不管它的display：设置如何，因为该元素仍然存在。根据{{3}}，我相信普通的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');">

相邻的同级匹配具有显示的元素：无

1 个答案: