html - 隐藏除特定子元素内容之外的所有内容

Question

我如何隐藏特定元素的所有内容，不包括一个特定子项的内容？

使用display 隐藏 child 。

我希望它们可见并使用 visibility 保留隐藏内容的空间。

这是我的:

#test1 {
  visibility: hidden
}
#test2 {
  visibility: visible
}
#test3 {
  display: none
}
#test4 {
  display: block
}

<div id="test1">
  <div id="test2">test2</div>
  test1
</div>
<div id="test3">
  <div id="test4">test4</div>
  test3
</div>

Answer 1

• 你给父级一个通用的类(如果你不使用HTML标签)，并应用它的属性visibility:hidden和高度:0
• 应用于所有子级 height:inherit(因此它将应用 0，因为父级拥有它)
• 通过 ID 或 class，无论您觉得最舒服，您都可以设置要显示的 child visibility: visible 和 高度:自动

.hidden {
  visibility: hidden;
  height: 0;
}
.hidden > div {
  height: inherit;
}
.hidden .show {
  visibility: visible;
  height: auto;
  border: 1px dashed red;
}

<div class="hidden" id="test1">
  <div class="show" id="test2">test2 - i'm the only one visible!</div>
  test1
</div>
<div class="hidden" id="test3">
  <div id="test4">test4</div>
  test3
</div>
<div class="hidden" id="test5">
  <div id="test6">test5</div>
  test6
</div>