Detaillierte Erklärung, wie Sie alle untergeordneten Elemente mit CSS auswählen

Wie wähle ich mit CSS rekursiv alle untergeordneten Elemente aus? Der folgende Artikel zeigt Ihnen, wie Sie mit CSS alle untergeordneten Elemente rekursiv auswählen. Ich hoffe, er ist hilfreich für Sie.

Wenn ein Element das untergeordnete Element eines anderen Elements ist, können Sie es mit dem untergeordneten Selektor abgleichen, der alle untergeordneten Elemente eines bestimmten übergeordneten Elements auswählt. Ein untergeordneter Selektor besteht aus zwei oder mehr Selektoren, die durch ">" getrennt sind. Er wird auch als Element > Element-Selektor bezeichnet.

Hinweis: Der untergeordnete Selektor kann nur seine eigenen Unterklassen und Elemente der zweiten Ebene auswählen, nicht jedoch Elemente unterhalb der zweiten Ebene.

Grammatik:

Wählt alle untergeordneten Elemente eines angegebenen Elements aus

Element1 > Element2

Wenn Sie alle untergeordneten Elemente rekursiv auswählen möchten, verwenden Sie die folgende Syntax

element1 > * {
    // CSS-Stile}

Beispiel 1: Alle untergeordneten Elemente auswählen

<!DOCTYPE html>
<html>
<Kopf>
	<meta charset="utf-8">
	<title>Unterelement-Selektor</title>
	<Stil> 
	        .demo > p{ 
	            Hintergrundfarbe: grün; 
	            Polsterung: 5px;
	        } 
	 </Stil> 
</Kopf> 
  
<Text> 
    <div Klasse="Demo"> 
        <p>Absatz 1</p> 
        <p>Absatz 2</p> 
        <span>Absatz 3</span>
        <div>Absatz 4</div>
    </div> 
      
    <p>Absatz 6</p> 
    <p>Absatz 7</p>
  
</html>

Effektbild:

Beispiel 2: Alle untergeordneten Elemente rekursiv auswählen

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<title>Unterelement-Selektor</title>
		<Stil> 
	        .demo > *{ 
	            Hintergrundfarbe: grün; 
	        } 
	    </Stil> 
</Kopf> 
  
<Text> 
    <div Klasse="Demo"> 
        <p>Absatz 1</p> 
        <p>Absatz 2</p> 
        <span>Absatz 3</span>
        <div>Absatz 4</div>
    </div> 
      
    <p>Absatz 6</p> 
    <p>Absatz 7</p>
  
</html>

Effektbild:

Dies ist das Ende dieses Artikels zur Verwendung von CSS zum Auswählen aller untergeordneten Elemente. Weitere Informationen zur Auswahl aller untergeordneten Elemente mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Verwendung von TypeScript-Generics

>>: Zusammenfassung mehrerer häufig verwendeter CentOS7-Images basierend auf Docker

CSS implementiert 0,5px-Zeilen, um Kompatibilitätsprobleme mit Mobilgeräten zu lösen (empfohlen)

Detaillierte Erklärung, wie Sie alle untergeordneten Elemente mit CSS auswählen

CSS implementiert 0,5px-Zeilen, um Kompatibilitätsprobleme mit Mobilgeräten zu lösen (empfohlen)

Verhindern von SQL-Injection in Webprojekten

MySQL-Datenbank-JDBC-Programmierung (Java stellt eine Verbindung zu MySQL her)

Reines CSS zum Ändern der Layoutgröße durch Ziehen nach links und rechts

So verbergen Sie Elemente im Web und ihre Vor- und Nachteile

So kapseln Sie die Karussellkomponente in Vue3

So erweitern Sie die Festplattengröße einer virtuellen Maschine

Lösen Sie das Problem des Tomcat 404-Fehlers bei der Bereitstellung von Spring Boot + Jar-Verpackungen

Drei Strategien zum Umschreiben von MySQL-Abfrageanweisungen

Tutorial zum Konfigurieren und Verwenden des i3-Fenstermanagers unter Linux

Artikel empfehlen

Eine kurze Analyse der Wissenspunkte zum Exportieren und Importieren von MySQL-Daten

Teilen Sie 8 sehr nützliche CSS-Entwicklungstools

So implementieren Sie Funktions-Currying und -Decurrying in Javascript

Natives JS zum Erzielen von Jalousie-Spezialeffekten

So mounten Sie eine Festplatte in Linux und richten sie so ein, dass sie beim Booten automatisch gemountet wird

Warum ich Nginx als Backend-Server-Proxy empfehle (Gründeanalyse)

Eine kurze Erläuterung des CSS-Überlaufmechanismus

Implementierung von MySQL Multi-version Concurrency Control MVCC

So installieren Sie Docker auf einem Linux-System und melden sich über SSH beim Docker-Container an

Schritte zur vollständigen Deinstallation des Docker-Images

Detaillierte Erklärung zum Schreiben von MySQL ungleich null und gleich null

CentOS 6 Kompilieren und installieren Sie ZLMediaKit-Analyse

So installieren Sie Nginx in CentOS7

Grundsätze zur Auswahl von MySQL-Datentypen

vue.js Router verschachtelte Routen