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

Detaillierte Erläuterung der Nginx-Statusüberwachung und Protokollanalyse

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

Detaillierte Erläuterung der Nginx-Statusüberwachung und Protokollanalyse

Eine kurze Analyse der zugrunde liegenden Prinzipien von MySQL-Transaktionen und Isolationsebenen

JavaScript-Webformularfunktion Kommunikation voller praktischer Informationen

Beispiel für die Implementierung einer Komponente mit fester Unterseite in Vue

Idea konfiguriert Tomcat zum Starten eines Webprojekts - Grafik-Tutorial

MySQL View-Prinzipanalyse

So stellen Sie ein SpringCloud-Projekt mit Docker bereit

Detaillierte Erklärung zur korrekten Öffnung in CSS

Detaillierte Erklärung des Unterschieds zwischen temporärer MySQL-Tabelle und Partitionstabelle

Lösung für Front-End-Browser-Schriftgrößen von weniger als 12 Pixel

Artikel empfehlen

So verwenden Sie CSS-Pseudoelemente, um den Stil mehrerer aufeinanderfolgender Elemente zu steuern

So lösen Sie das Problem des Randkollapses in CSS

JavaScript, um den Effekt des Tab-Leistenwechsels zu erzielen

Erläuterung der Verwendung von GROUP BY in gruppierten Abfragen und der SQL-Ausführungsreihenfolge

Detailliertes Beispiel für MySQL-Joint-Tabellen-Update-Daten

Einführung in Jenkins und wie man Jenkins mit Docker bereitstellt

Was ist nach der Installation von Ubuntu 20.04 zu tun (Anleitung für Anfänger)

Schreiben Sie ein React-ähnliches Framework von Grund auf

So installieren und implementieren Sie MySQL 8.0 unter CentOS8

Schritte zum Upgrade des Ubuntu 16.04-Kernels

Einführung in den visuellen Ausdruck des Kerninhalts von Webseiten (Bild und Text)

Eine kurze Diskussion über verschiedene Möglichkeiten zur Implementierung einer Front-End-JS-Sandbox

Zusammenfassung der MySQL InnoDB-Architektur

So erstellen Sie ein Docker-Repository mit Nexus

HTML-Auswahloption So treffen Sie die Standardauswahl