Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Selektor (CSS)

Ein CSS-Selektor ist der Teil einer CSS-Regel, der beschreibt, welche Elemente in einem Dokument mit der Regel übereinstimmen. Die übereinstimmenden Elemente erhalten den in der Regel angegebenen Stil.

Beispiel

Betrachten Sie dieses CSS:

css
p {
  color: green;
}

div.warning {
  width: 100%;
  border: 2px solid yellow;
  color: white;
  background-color: darkred;
  padding: 0.8em 0.8em 0.6em;
}

#customized {
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}

Die Selektoren hier sind "p" (welcher die Farbe Grün auf den Text innerhalb eines <p>-Elements anwendet), "div.warning" (welches jedes <div>-Element mit der class "warning" wie ein Warnfeld aussehen lässt), und "#customized", welches die Basis-Schriftart des Elements mit der ID "customized" auf eine 16-Pixel hohe Lucida Grande oder eine der anderen angegebenen Ersatzschriften setzt.

Wir können dieses CSS dann auf etwas HTML anwenden, wie zum Beispiel:

html
<p>This is happy text.</p>

<div class="warning">
  Be careful! There are wizards present, and they are quick to anger!
</div>

<div id="customized">
  <p>This is happy text.</p>

  <div class="warning">
    Be careful! There are wizards present, and they are quick to anger!
  </div>
</div>

Der resultierende Seiteninhalt wird folgendermaßen gestylt:

Siehe auch