javascript - 如何隐藏父div，以使子div在HTML，CSS中可见？

This question already has answers here:

Show Child Div within Hidden Parent Div
                                
                                    （11个答案）
                                
                        
                                3年前关闭。
            
                    
在我的HTML页面上工作时，我遇到了一个场景，其中有两个div元素（让我们说父母和孩子）。

现在的情况是，我想隐藏父div，但只显示它的子div。如果我隐藏父div并使子div可见，则它将不起作用，因为子在父div内。

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

我可以将ID选择器用于子div，并可以将其与父div类嵌套在一起吗？

  parent class:

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

  child class:

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

请对此提供一些建议。

最佳答案

您可以将visibility: hidden应用于父级，而将visibility: visible;应用于子级-我不确定跨浏览器的效果如何，因为我从未真正尝试过在现实世界中的项目中使用该cc（如果需要）为此，您的设计可能有些奇怪，或者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进行重组。

关于javascript - 如何隐藏父div，以使子div在HTML，CSS中可见？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40859327/