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

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

王林

Freigeben： 2023-08-29 12:09:02

nach vorne

1083 Leute haben es durchsucht

CSS 中的大于号 (>) Was ist ein Selektor?

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 */
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!