Übersicht über gängige CSS-Selektorklassifizierungen

Allgemeine CSS-Selektorklassifizierung und spezifische Codebeispiele

Der CSS-Selektor ist ein Tool, mit dem Elemente von HTML-Dokumenten ausgewählt und ihnen bestimmte Stile zugewiesen werden. Die Beherrschung der verschiedenen Arten von CSS-Selektoren ist für das Schreiben effizienter CSS-Stylesheets von entscheidender Bedeutung. Im Folgenden finden Sie gängige CSS-Selektorkategorien und spezifische Codebeispiele.

1. Elementselektor
   Der Elementselektor ist der gebräuchlichste CSS-Selektor. Es wählt Elemente aus, indem es ihre Tag-Namen auswählt. Um beispielsweise alle Absatzelemente auszuwählen, können Sie den folgenden Stil verwenden:

p {
  color: blue;
}

2. Klassenselektor (Klassenselektor)
   Der Klassenselektor fügt das Klassenattribut zum HTML-Element hinzu und verwendet einen Punkt, um es zu identifizieren. Dadurch kann derselbe Stil auf mehrere Elemente im Dokument angewendet werden. Beispiele sind wie folgt:

.button {
  background-color: red;
}

So verwenden Sie es in HTML:

<button class="button">Click me</button>

3. ID-Selektor (ID-Selektor)
   Der ID-Selektor fügt dem HTML-Element das ID-Attribut hinzu und verwendet das Nummernzeichen, um es zu identifizieren. Es eignet sich für Situationen, in denen nur einem Element ein bestimmter Stil zugewiesen werden muss. Das Codebeispiel lautet wie folgt: So verwenden Sie

#header {
  background-color: yellow;
}

in HTML:

<header id="header">This is the header</header>

4. Untergeordneter Selektor (Untergeordneter Selektor)
   Der untergeordnete Selektor kann die direkten untergeordneten Elemente eines Elements auswählen. Es wird durch das Größer-als-Zeichen (>) identifiziert. Der folgende Code wählt die direkte untergeordnete Elementspanne aller Absatzelemente aus und setzt die Schriftfarbe auf Rot:

p > span {
  color: red;
}

<p>This is a <span>red</span> text.</p>

5. Descendant Selector (Descendant Selector)
   Der Descendant Selector kann alle Nachkommenelemente eines Elements auswählen. Die Darstellung erfolgt durch Leerzeichen. Der folgende Code wählt die Span-Elemente innerhalb aller Absatzelemente aus und setzt die Hintergrundfarbe auf Grau:

p span {
  background-color: gray;
}

<p>This is a <span>gray</span> text.</p>

6. Adjacent Sibling Selector (Adjacent Sibling Selector)
   Der Adjacent Sibling Selector kann das gleichgeordnete Element direkt hinter einem Element auswählen. Es ist mit einem Pluszeichen (+) gekennzeichnet. Der folgende Code wählt die p-Elemente aus, die unmittelbar auf alle h2-Elemente folgen, und setzt die Schriftfarbe auf Blau:

h2 + p {
  color: blue;
}

<h2>Heading 2</h2>
<p>This paragraph is immediately following the h2 element.</p>

7. Universal Selector (Universal Selector)
   Der Universal Selector kann alle Elemente im HTML-Dokument auswählen. Es wird durch ein Sternchen (*) dargestellt. Der folgende Code wählt alle Elemente auf der Seite aus und legt den Rand auf 1 Pixel fest:

* {
  border: 1px solid black;
}

Die oben genannten sind gängige CSS-Auswahlkategorien und ihre Beispielcodes. Wenn Sie die verschiedenen Arten von Selektoren und deren Verwendung verstehen, können Sie beim Schreiben von CSS-Stylesheets flexibler und präziser vorgehen. Beachten Sie, dass das Kombinieren und Verschachteln von Selektoren auch mit CSS-Selektoren für eine spezifischere Elementauswahl und Stildefinition möglich ist.

Das obige ist der detaillierte Inhalt vonÜbersicht über gängige CSS-Selektorklassifizierungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!