Question

除了一个特定孩子的内容外，我如何隐藏某个元素的所有内容？

使用display隐藏了孩子。

我希望它们可见，并使用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

您向父级提供一般addrs["loopback"][0] = 2（如果您不使用HTML标记），并将其应用于属性class和visibility:hidden
适用于所有子级height:0（因此，如果父级拥有height:inherit，它将会应用{/ 1}}
0或ID，无论您感觉最舒服，您都要设置要展示的孩子class和visibility: visible

height:auto

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

Answer 2

尝试这样的事情：

#test1 > * { visibility:hidden; }
#test1 > #test2 { visibility:visible; }

#test3 > * { display:none; }
#test3 > #test4 { display:block; }

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

这里的本质是，你不能隐藏父母，仍然显示一个孩子。父母需要是可见的，你必须隐藏不需要的子元素，而只显示你需要的元素。

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

2 个答案: