Heim >Web-Frontend >CSS-Tutorial >Was ist der Größer-als-Selektor (>) in CSS?
Was ist der Größer-als-Selektor (>) in CSS?
- 王林nach vorne
- 2023-08-29 12:09:021060Durchsuche
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.
<html>
<head>
<style>
ol>li {
color: blue;
}
</style>
</head>
<body>
<h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
<ol>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li> NodeJS </li>
</ol>
</body>
</html>
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.
<html>
<head>
<style>
div>p {
color: red;
}
div p {
background-color: aqua;
}
</style>
</head>
<body>
<h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
<div>
<p> This paragraph is at the first level. </p>
<h3>
<p> This paragraph is at the second level. </p>
<h4>
<p> This paragraph is at the third level. </p>
</h4>
</h3>
</div>
</body>
</html>
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.
<html>
<head>
<style>
.container>ul>li {
color: red;
padding: 3px;
background-color: green;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
<div class = "container">
<ul>
<li> one </li>
<li> Two </li>
<li> Three </li>
</ul>
</div>
<ul>
<li> Four </li>
<li> Five </li>
<li> Six </li>
</ul>
</body>
</html>
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!