相邻的兄弟姐妹匹配显示元素:无

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (18)

我有一个简单的CSS格式 - 或者我想!

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

第二个元素总是存在。

我需要在两者之间保持一个空间,所以我认为下面的CSS就足够了:

.hidden + .visible {
    margin-left: 200px;
}   

但是,似乎虽然第一个元素有display:none应用,但是选择器仍然匹配第二个元素作为相邻(不是第一个),因此应用边距。

除了发现它很“奇怪”之外,我还需要找到一种在两者之间保持空间的方法,但只有在两者都可见时才能找到。

有任何想法吗?

附有一个示例的片段。

.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将继续应用该类格式,无论它是否显示:设置,因为该元素仍然存在。根据这个答案,我相信纯粹的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');">

扫码关注云+社区

领取腾讯云代金券