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
Artikel empfehlen
Detaillierte Erklärung der Bind-Mounts für die Docker-Datenspeicherung
Bevor Sie diesen Artikel lesen, hoffe ich, dass S...
Erklärung zur Änderung des npm Taobao-Spiegels
1. Nutzung auf höchster Ebene 1. Installieren Sie...
Einführung in gängige XHTML-Tags
<br />Ich habe festgestellt, dass viele Leut...
Verstehen Sie kurz die MySQL-Datenbankoptimierungsphase
Einführung Haben Sie schon einmal eine Situation ...
Detaillierte Erklärung der Prinzipien und der Verwendung von MySQL-Datentypen und Feldattributen
Dieser Artikel beschreibt die MySQL-Datentypen un...
VUE + OPENLAYERS erreicht Echtzeit-Positionierungsfunktion
Inhaltsverzeichnis Vorwort 1. Etikettenstil defin...
Lösen Sie das Problem, dass der MySQL-Verbindungsport belegt ist und Dateipfadfehler verursacht
Heute Morgen hatte ich vor, mit Wampserver eine P...
MariaDB-Remote-Login-Konfiguration und Problemlösung
Vorwort: Der Installationsvorgang wird nicht im D...
9 großartige JavaScript-Framework-Skripte zum Zeichnen von Diagrammen im Web
9 großartige JavaScript-Framework-Skripte zum Zei...
Tutorial zur Installation und Konfiguration von Hbase unter Linux
Inhaltsverzeichnis Hbase-Installation und -Konfig...
Der Unterschied zwischen MySQL-Datenbankhost 127.0.0.1 und localhost
Viele meiner Freunde haben möglicherweise ein Pro...
Detaillierte Erläuterung der Wissenspunkte zur Verwendung von TEXT/BLOB-Typen in MySQL
1. Der Unterschied zwischen TEXT und BLOB Der ein...
So erstellen Sie einen MySQL PXC-Cluster
Inhaltsverzeichnis 1. Einführung in PXC 1.1 Einfü...
Lösung für das Problem, dass Emoji-Ausdrücke nicht in MySQL eingefügt werden können
Vorwort Ich dachte immer, dass UTF-8 eine univers...
Erfahren Sie, wie Sie den Fehler beim Speichern chinesischer Schriftzeichen in der MySQL-Datenbank beheben können
Inhaltsverzeichnis 1. Aufgetretene Probleme 2. An...