Warum kann „:first-child' das erste „' in verschachtelten Elementen nicht auswählen und wie kann ich das beheben?-CSS-Tutorial-php.cn

Warum kann „:first-child' das erste „' in verschachtelten Elementen nicht auswählen und wie kann ich das beheben?

Barbara Streisand

Freigeben： 2024-12-09 10:12:08

Original

1028 Leute haben es durchsucht

Why Does `:first-child` Fail to Select the First `` in Nested Elements, and How Can I Fix It?

:first-child stimmt in bestimmten Fällen nicht mit erwarteten Elementen überein

Beim Versuch, das erste h1-Element innerhalb eines Div mit der Klasse auszuwählen „detail_container“, der :first-child-Selektor funktioniert möglicherweise nicht wie vorgesehen. Dies tritt auf, wenn h1 nicht das unmittelbare untergeordnete Element des div ist, wie im folgenden Beispiel:

<style type="text/css">
.detail_container h1:first-child {
  color: blue;
} 
</style>
<body>
<div class="detail_container">
  <ul>
    <li></li>
    <li></li>
  </ul>
  <h1>First H1</h1>
  <h1>Second H1</h1>
</div>
</body>

Nach dem Login kopieren

In diesem Fall kann der :first-child-Selektor das erste h1 nicht auswählen, da das ul-Element dies ist das erste Kind des Div, nicht das h1.

So lösen Sie das Problem

An Wählen Sie das erste h1-Element unabhängig von seiner Position innerhalb des Div aus. Es stehen alternative CSS-Selektoren zur Verfügung:

1. :first-of-type

Der :first-of-type-Selektor wählt das erste untergeordnete Element seines übergeordneten Elements aus, das einem bestimmten Elementtyp entspricht. In diesem Fall würde das erste h1-Kind des Div wie folgt ausgewählt:

.detail_container h1:first-of-type {
  color: blue;
}

Nach dem Login kopieren

2. Klassenbasierte Auswahl

Ein anderer Ansatz besteht darin, dem ersten h1 eine eindeutige Klasse zu geben, z. B. „first“, und diese Klasse dann im CSS als Ziel festzulegen:

.detail_container h1.first {
  color: blue;
}

Nach dem Login kopieren

Dies Methode bietet mehr Flexibilität und Kontrolle über die Auswahl.

Das obige ist der detaillierte Inhalt vonWarum kann „:first-child' das erste „' in verschachtelten Elementen nicht auswählen und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!