如何隐藏父div在HTML，CSS中保持子div可见？

Question

在我的HTML页面上工作时，我遇到了一个场景，我有两个div元素（比如说父母和孩子）。

现在的情况是，我想隐藏父div，但只显示它的子div。如果我隐藏父div并使子div可见，则它将无效，因为child在父div中。

我可以隐藏除了我想要显示的元素之外的所有子元素。但是还有其他解决方案吗？

我可以为子div使用id选择器并执行类似于使用父div类嵌套该id选择器吗？

  parent class:

  .KPIDashboardContainerInertiaMatrix{
      height: 175px;
      margin: 0px auto;
      color: #005686;
  }   

  child class:

  .KPIDashBoardContainerInertiaMatrixTable{
      display: table;
      border: "0";
      border-spacing: "0";
  }

请就此提出一些建议。

Answer 1

您可以将visibility: hidden应用于父级，将visibility: visible;应用于孩子 - 我不确定这种方法在跨浏览器中的效果如何，因为我从未真正尝试过将其用于实际世界项目通常如果您需要这样做，那么您的设计中的某些东西很奇怪，或者您的HTML结构有些奇怪。

<强> HTML

<div class="div1">
    <div class="div2">
    </div>
</div>

<强> CSS

.div1{
  background: #000;
  height:200px;
  width: 200px;
  visibility :hidden;
}
.div2{
  background: #f00;
  height:100px;
  width: 100px;
  visibility: visible;

}

https://jsfiddle.net/xdmqz5jt/

您还可以使用图层，即绝对/固定定位，负边距或相对定位来重叠2个兄弟div，这需要重新构建HTML。