Wie wähle ich alle untergeordneten Elemente mit CSS rekursiv aus?

CSS (oder Cascading Style Sheets) wird zum Rendern und Entwerfen von Webseiten verwendet. Es wird nicht allein, sondern zusammen mit HTML oder XML verwendet, um das Erscheinungsbild und Layout einer Webseite zu definieren. CSS hilft Entwicklern dabei, alle HTML-Elemente zu gestalten, einschließlich Überschriften, Absätze, Text, Bilder, Tabellen und mehr. Darüber hinaus wird auch angegeben, wie sie auf verschiedenen Bildschirmen, auf druckbaren oder anderen Medientypen angezeigt werden. Es kann auch verwendet werden, um responsive Webdesigns für verschiedene Bildschirmgrößen und Geräte zu erstellen.

CSS spielt eine wichtige Rolle in der Webentwicklung, da es von allen gängigen Webbrowsern weitgehend unterstützt wird und es Entwicklern ermöglicht, hervorragende Benutzeroberflächen (UI) und dynamische Webanwendungen zu erstellen, die Benutzer ansprechen und ihr Gesamterlebnis verbessern. Die Auswahl von Elementen ist eine der häufigsten Aufgaben beim Stylen von HTML-Elementen mithilfe von CSS. Sie werden feststellen, dass wir in manchen Fällen möglicherweise alle untergeordneten Elemente eines Elements auswählen möchten, einschließlich ihrer verschachtelten untergeordneten Elemente. In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS alle diese untergeordneten Elemente rekursiv auswählen.

Was sind CSS-Selektoren?

CSS-Selektoren sind ein Muster zum Auswählen und Positionieren von HTML-Elementen für das Styling oder andere Vorgänge. Selektoren wählen Elemente basierend auf Attributen wie Klasse, ID oder Typ aus. Die Syntax für die Verwendung von CSS-Selektoren lautet wie folgt:

Grammatik

element > element {
   //CSS styles go here
}

Was ist ein untergeordneter Selektor in CSS?

Ein untergeordneter Selektor in CSS ist ein Kombinator, der direkte untergeordnete Elemente eines übergeordneten Elements auswählt. Die Definition erfolgt über das Symbol „>“. Außerdem werden direkte untergeordnete Elemente des angegebenen übergeordneten Elements ausgewählt.

Grammatik

.parent > li {
   //CSS styles go here
}

Die Syntax besteht aus dem „>“-Symbol, das nur auf direkte untergeordnete Elemente des „main-list“-Elements abzielt, in diesem Fall „li“. Daher wählt die oben definierte CSS-Regel nur die Listen „Listenelement 1“ und „Listenelement 2“ aus, nicht jedoch die Liste „Liste 1“, die in einem verschachtelten ul-Element verschachtelt ist.

Untergeordnete Selektoren sind nützlich, wenn Sie Stile auf bestimmte untergeordnete Elemente eines übergeordneten Elements anwenden müssen, ohne deren untergeordnete oder verschachtelte untergeordnete Elemente zu beeinflussen. Untergeordnete Selektoren bieten außerdem eine spezifischere Möglichkeit, Elemente im Dokumentbaum zu finden, und können dazu beitragen, Konflikte mit anderen CSS-Regeln zu vermeiden, die möglicherweise für ähnliche Elemente gelten.

Alle untergeordneten Elemente in CSS rekursiv auswählen

Manchmal kann es vorkommen, dass wir alle untergeordneten Elemente auswählen müssen. Wir können CSS-Selektoren verwenden, um Elemente mit dem (*)-Operator auszuwählen. Die Syntax zur Auswahl aller untergeordneten Elemente eines Elements wird über den Operator „>“ definiert. Die folgende CSS-Regel wählt beispielsweise alle direkten untergeordneten Elemente des „parent“-Elements aus.

Grammatik

.main-list > * {
   //CSS styles go here
}

Die obige Syntax wählt alle untergeordneten Elemente des „main-list“-Elements aus, einschließlich ihrer verschachtelten untergeordneten Elemente. Sie werden feststellen, dass das Leerzeichen zwischen dem „main-list“-Element und dem Platzhalter-Selektor (*) anzeigt, dass wir alle Nachkommen des „parent“-Elements auswählen möchten, nicht nur die direkten untergeordneten Elemente.

Sie können auch die Pseudoklasse „:not()“ verwenden, um bestimmte Elemente von der Auswahl auszuschließen. Die folgende CSS-Regel wählt beispielsweise rekursiv alle untergeordneten Elemente des „main-list“-Elements aus, mit Ausnahme des „list-not“-Elements -

Beispiel 1: Demonstriert ein Beispiel für die Auswahl aller untergeordneten Elemente

Im folgenden Beispiel definieren wir eine .parent > div-Klasse, die Stile auf jedes Element anwendet, das ein direktes untergeordnetes Element eines Elements mit der Klasse „parent“ ist. In diesem Fall ist das einzige Element, das diese Bedingung erfüllt, das Element vom Typ „main-list“.

Der im CSS-Code angegebene Stil setzt die Hintergrundfarbe des passenden

-Elements auf Grün. Daher ist die Hintergrundfarbe des

-Elements mit dem Klassennamen „main-list“ grün. Die

-Elemente innerhalb des

-Elements mit dem Klassennamen „main-list“ sind von diesem CSS-Stil nicht betroffen, da sie keine direkten untergeordneten Elemente des übergeordneten Elements mit dem Klassennamen „parent“ sind.

Die beiden

Elemente, die direkte untergeordnete Elemente des übergeordneten Elements sind, sind jedoch ebenfalls nicht betroffen, da sie keine Elemente sind.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .parent > div {
            background-color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <div class="main-list">
            <li>List item 1</li>
            <li>List item 2</li>
         </div>
         <li>List item 3</li>
         <li>List item 4</li>
      </div>
   </body>
</html>

Beispiel 2: Beispiel, das die rekursive Auswahl aller untergeordneten Elemente demonstriert

Im gegebenen Beispiel wird der CSS-Selektor „div.parent > *“ verwendet, um rekursiv alle untergeordneten Elemente des „div“-Elements auszuwählen, die die Klasse „parent“ haben, was bedeutet, dass alle untergeordneten Elemente von „div“ ausgewählt werden, einschließlich verschachtelte Elemente

.

Im angegebenen Code wird der Selektor in Verbindung mit dem Attribut „background-color: green“ verwendet, das die Hintergrundfarbe für alle untergeordneten Elemente des „div“-Elements mit der Klasse „parent“, einschließlich verschachtelter Elemente, auf Grün setzt. li“-Elemente und „li“-Elemente innerhalb von „span“-Elementen.

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.parent,
         div.parent > * {
            background-color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <li>List item 1</li>
         <li>List item 2</li>
         <span>
            <li>List item 3</li>
         </span>
      </div>
      <li>List item 4</li>
      <li>List item 5</li>
   </body>
</html>

Fazit

CSS ist die Sprache, die zum Gestalten von Webseiten verwendet wird. In CSS ist die Auswahl von Elementen eine der häufigsten Aufgaben. Untergeordnete Selektoren in CSS werden verwendet, um direkte untergeordnete Elemente eines übergeordneten Elements auszuwählen. Die Definition erfolgt über das Symbol „>“. Manchmal müssen wir alle untergeordneten Elemente rekursiv auswählen, was mit dem ()-Operator erreicht werden kann.

Durch die Verwendung eines Leerzeichens zwischen dem übergeordneten Element und dem Platzhalter selector() können wir alle untergeordneten Elemente des übergeordneten Elements auswählen. Die Pseudoklasse „:not()“ kann auch verwendet werden, um bestimmte Elemente von der Auswahl auszuschließen. CSS-Selektoren sind für die Erstellung optisch ansprechender und dynamischer Websites, die das Benutzererlebnis verbessern, unerlässlich.

Das obige ist der detaillierte Inhalt vonWie wähle ich alle untergeordneten Elemente mit CSS rekursiv aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7470

15

CakePHP-Tutorial

1377

52

Wie lautet das Format des Kontonamens von Steam?

77

11

Win11 -Aktivierungsschlüssel dauerhaft

48

19

NYT -Verbindungen Hinweise und Antworten

19

29

Mehr anzeigen