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中文網其他相關文章！