Wie zeige ich ein untergeordnetes Div an, während das übergeordnete Div in CSS ausgeblendet wird?

So zeigen Sie ein untergeordnetes Div an, während das übergeordnete Div ausgeblendet wird

Das Ausblenden eines übergeordneten Div bei gleichzeitiger Beibehaltung der Sichtbarkeit seiner untergeordneten Elemente kann durch CSS-Manipulation erreicht werden. So geht's:

Schritt 1: Übergeordnetes Div ausblenden

.Main-Div {
  display: none;
}

Diese CSS-Regel verbirgt das übergeordnete Div mit der Klasse „Main-Div“.

Schritt 2: Machen Sie das untergeordnete Div sichtbar

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

Diese Regel zielt auf das untergeordnete Div („.Inner-Div“) im Verborgenen ab parent div und macht es sichtbar.

Vollständiges Beispiel

Durch die Kombination dieser Regeln lautet der resultierende CSS- und HTML-Code:

.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>

Durch die Anwendung dieser Technik Sie können untergeordnete Elemente selektiv anzeigen, auch wenn deren übergeordnetes Div ausgeblendet ist.

Das obige ist der detaillierte Inhalt vonWie zeige ich ein untergeordnetes Div an, während das übergeordnete Div in CSS ausgeblendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!