CSS中如何显示子div同时隐藏其父div？

如何在隐藏其父 Div 的同时显示子 Div

隐藏父 div 同时保持其子元素的可见性可以通过 CSS 操作来实现。操作方法如下：

第 1 步：隐藏父 Div

.Main-Div {
  display: none;
}

此 CSS 规则隐藏具有“Main-Div”类的父 div。

第 2 步：使子 div 可见

.Main-Div > .Inner-Div {
  visibility: visible;
}

此规则针对子 div (".Inner-Div") 在隐藏的父 div 中并使其可见。

完整示例

结合这些规则，生成的 CSS 和 HTML 代码为：

.Main-Div {
  display: none;
}

.Main-Div > .Inner-Div {
  visibility: visible;
}

<div class="Main-Div">
  This is some Text..
  This is some Text..
  <div class="Inner-Div">
    <a href="#">
      <img  src="/static/imghwm/default1.png" data-src="/image/pic.jpg" class="lazy" alt="CSS中如何显示子div同时隐藏其父div？" >
    </a>
  </div>
  This is some Text..
  This is some Text..
</div>

通过应用此技术，即使子元素的父 div 被隐藏，您也可以有选择地显示子元素。

以上是CSS中如何显示子div同时隐藏其父div？的详细内容。更多信息请关注PHP中文网其他相关文章！