Was ist der Größer-als-Selektor (>) in CSS?

In CSS wird das Symbol „>“ nicht wie in anderen Programmiersprachen zum Vergleichen zweier Werte verwendet. Hier verwenden wir das Größer-als-Zeichen (>) als Selektor.

In CSS werden Selektoren verwendet, um einzelne oder mehrere HTML-Elemente auszuwählen. Immer wenn wir das Größer-als-Zeichen in einem Selektor verwenden, werden die direkten untergeordneten Elemente des übergeordneten Elements ausgewählt, nicht jedoch die tief verschachtelten untergeordneten Elemente.

Grammatik

Benutzer können die Größer-als-Zeichen in CSS-Selektoren gemäß der folgenden Syntax verwenden.

selecter1>selector2 { /* CSS code */ }

In der obigen Syntax ist „selector1“ das übergeordnete Element und „selector2“ das direkte untergeordnete Element. Daher definieren wir die Stile der untergeordneten Elemente im Deklarationsblock.

Beispiel 1

Im folgenden Beispiel erstellen wir eine geordnete Liste von HTML-Elementen. In CSS verwenden wir den „ol>li“-Selektor, was bedeutet, dass alle „ol“-HTML-Elemente ausgewählt werden, die direkte Kinder des „li“-Elements sind.

In der Ausgabe kann der Benutzer beobachten, dass alle Elemente in der Liste blau werden, da alle „li“ direkte Kinder von „ol“ sind.

   
  
Using the  (>) CSS selector  to select direct child elements in CSS
 
 
 HTML 
 
 CSS 
 
 JavaScript 
 
 NodeJS 
 
  

Beispiel 2

Im folgenden Beispiel haben wir ein div-Element, das „p“-Elemente auf verschiedenen Ebenen enthält. Innerhalb des div-Elements haben wir das „ht4“-Element und das „p“-Element hinzugefügt. Daher haben wir „p“-Elemente auf der zweiten und dritten Tiefenebene hinzugefügt.

In CSS verwenden wir den CSS-Selektor „div>p“, um alle direkten „p“-Elemente eines div-Elements auszuwählen. Zusätzlich haben wir den CSS-Selektor „div p“ verwendet, der alle „p“-Elemente innerhalb eines div-Elements auswählt.

In der Ausgabe kann der Benutzer beobachten, dass „color: red“ nur auf das erste „p“-Element angewendet wird, da es das einzige direkte untergeordnete Element des div-Elements ist. Wenn der CSS-Selektor „div p“ untergeordnete Elemente aus allen Ebenen auswählt, wird „background-color: aqua“ auf alle „p“-Elemente angewendet.

   
  
Using the  (>) CSS selector  to select direct child elements in CSS
 
 
 This paragraph is at the first level. 
 
 
 This paragraph is at the second level. 
 
 
 This paragraph is at the third level. 
 
  
  

Beispiel 3

Im folgenden Beispiel verwenden wir das Größer-als-Zeichen, um HTML-Elemente aus tief verschachtelten Ebenen auszuwählen. Hier enthält das HTML-Element „container“ die ungeordnete Liste, und wir haben die ungeordnete Liste auch außerhalb des Elements „container“ erstellt.

In CSS verwenden wir den CSS-Selektor „.container>ul>li“, um alle „li“-Elemente auszuwählen, die direkte untergeordnete Elemente des „ul“-Elements sind. Hier sollte das „ul“-Element ein direktes untergeordnetes Element des „ul“-Elements Element An sein Element mit einem „Container“-Klassennamen.

In der Ausgabe können wir sehen, dass das gesamte CSS nur auf verschachtelte Listen angewendet wird.

   
  
Using the  (>) CSS selector  to select direct child elements in CSS
 
 
 
 one 
 
 Two 
 
 Three 
 
 
 
 
 Four 
 
 Five 
 
 Six 
 
  

Der Benutzer hat gelernt, den CSS-Selektor „Größer als“ (>) in CSS zu verwenden. Es wird verwendet, um direkte untergeordnete Elemente eines bestimmten Elements auszuwählen. Hier können wir HTML-Tags, Klassennamen, IDs usw. verwenden. CSS-Selektor mit einem Größer-als-Zeichen (>).

Das obige ist der detaillierte Inhalt vonWas ist der Größer-als-Selektor (>) in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!