Heim >Web-Frontend >CSS-Tutorial >Warum kann „:first-child' das erste „' in verschachtelten Elementen nicht auswählen und wie kann ich das beheben?
Warum kann „:first-child' das erste „' in verschachtelten Elementen nicht auswählen und wie kann ich das beheben?
- Barbara StreisandOriginal
- 2024-12-09 10:12:081028Durchsuche
: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>
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;
}
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;
}
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!