CSS中如何顯示子div同時隱藏其父div？-css教學-PHP中文網

CSS中如何顯示子div同時隱藏其父div？

Linda Hamilton

發布： 2024-12-02 14:03:11

原創

808 人瀏覽過

How to Show a Child Div While Hiding Its Parent Div in CSS?

如何在隱藏其父 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="/image/pic.jpg" />
    </a>
  </div>
  This is some Text..
  This is some Text..
</div>

登入後複製

透過應用此技術，即使子元素的父div 被隱藏，您也可以選擇性地顯示子元素。

以上是CSS中如何顯示子div同時隱藏其父div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！