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

【问题标题】：Hide All Except Specific Child Element Content隐藏除特定子元素内容之外的所有内容
【发布时间】：2015-07-26 12:45:45
【问题描述】：

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

使用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>

【问题讨论】：

如果父级不可见，子级如何可见？他们应该分开

标签： html css

【解决方案1】：

你给父级一个通用的class（如果你不使用HTML标签），并应用属性visibility:hidden和height:0
适用于所有孩子height:inherit（因此它将像父母一样应用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;
}

<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>

【讨论】：

【解决方案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>

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

【讨论】：