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

Beispiel zum Erstellen und Ausführen mehrerer MySQL-Container in Docker

Detaillierte Erklärung der Lösung für das Problem, dass der Inhalt, auf den der src des Iframes verweist, nicht aktualisiert wird

Artikel

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

Beispiel zum Erstellen und Ausführen mehrerer MySQL-Container in Docker

Verwenden einer Cursorschleife zum Lesen temporärer Tabellen in gespeicherten MySQL-Prozeduren

So installieren und deinstallieren Sie IIS7-Komponenten mithilfe der WIN2008-Serverbefehlszeile

Webentwicklungs-Tutorial: domänenübergreifende Lösung – detaillierte Erläuterung

Detaillierte Erklärung der Lösung für das Problem, dass der Inhalt, auf den der src des Iframes verweist, nicht aktualisiert wird

XHTML: Rahmenstruktur-Tag

Verständnis und Anwendungsszenarien von Enumerationstypen in TypeScript

So installieren Sie Docker CE auf Ubuntu 18.04 (Community Edition)

Centos7-Konfiguration, Fastdfs und Analyse des Implementierungsprozesses des verteilten Dateispeichersystems Nginx

Drei Prinzipien effizienten Navigationsdesigns, die Webdesigner kennen müssen

Artikel empfehlen

Interpretation und Verwendung verschiedener React-State-Manager

Probleme und Vorsichtsmaßnahmen beim Festlegen von maxPostSize für Tomcat

So verwenden Sie .htaccess, um einer bestimmten IP den Zugriff auf die Website zu verbieten

Docker verwendet Root, um in den Container zu gelangen

Detaillierte Erklärung der Softwarekonfiguration mit Docker-Compose unter Linux

Installieren Sie Docker für Windows unter Windows 10 Home Edition

Schritte zum Kapseln von Element-UI-Popupkomponenten

MySQL 5.7.18 Installations-Tutorial unter Windows

Tiefgreifendes Verständnis des Slot-Scopes in Vue (für Anfänger geeignet)

So starten Sie mehrere MySQL-Instanzen in CentOS 7.0 (mysql-5.7.21)

Detaillierte Erläuterung des CocosCreator-Nachrichtenverteilungsmechanismus

Eine kurze Diskussion über die häufig verwendeten APIs der VUE uni-app

Detaillierte Erklärung zur Verwendung von MySQL, wobei

Kapitel zur Entwicklung von WeChat-Applets: Fallstricke

So ändern Sie Farben und Designs in Vim unter Linux