Wie viele Arten von CSS-Selektoren gibt es?

CSS-Selektor ist ein Muster, das zum Auswählen eines Elements in einem HTML- oder XML-Dokument verwendet wird. Es ermöglicht Entwicklern, Elemente auf der Seite über Selektoren wie Klassennamen, ID, Tag-Namen usw. abzurufen und so den Stil, das Verhalten und den Inhalt des Elements zu ändern. In CSS sind Selektoren eines der wichtigsten Konzepte und der Kern von CSS. In diesem Artikel werden die Arten von CSS-Selektoren im Detail vorgestellt.

1. Tag-Selektor

Der grundlegendste CSS-Selektor ist der Tag-Selektor, der Elemente basierend auf HTML-Tags auswählt. Der folgende CSS-Selektor wählt beispielsweise alle Absätze in HTML aus:

p {
  color: red;
}

2. ID-Selektor

Der ID-Selektor wählt Elemente anhand ihrer eindeutigen ID aus. In HTML sollte die ID jedes Elements eindeutig sein. Der folgende CSS-Selektor wählt beispielsweise das Element mit der ID „my-element“ aus:

#my-element {
  background-color: yellow;
}

3. Klassenselektor

Der Klassenselektor ermöglicht es uns, Elemente basierend auf ihrem Klassenattribut auszuwählen. In HTML können mehrere Elemente denselben Klassennamen verwenden. Der folgende CSS-Selektor wählt beispielsweise alle Elemente in HTML mit der Klasse „my-class“ aus:

.my-class {
  font-size: 16px;
}

4. Adjacent Sibling Selector

Der Adjacent Sibling Selector wählt Elemente basierend auf den Geschwisterelementen aus, die auf das angegebene Element folgen. Der folgende CSS-Selektor wählt beispielsweise alle p-Elemente aus, die unmittelbar auf das h1-Element folgen:

h1 + p {
  color: blue;
}

5. Selektor für untergeordnete Elemente

Der Selektor für untergeordnete Elemente wählt die direkten untergeordneten Elemente des angegebenen Elements aus. Der folgende CSS-Selektor wählt beispielsweise alle direkten untergeordneten Elemente li im ul-Element aus:

ul > li {
  list-style: none;
}

6. Descendant-Selektor

Der Descendant-Selektor wählt alle untergeordneten Elemente unter dem angegebenen Element aus. Der folgende CSS-Selektor wählt beispielsweise alle li-Elemente unter dem div-Element aus:

div li {
  color: purple;
}

7. Wildcard-Selektor

Der Wildcard-Selektor stimmt mit allen Elementen im HTML-Dokument überein. Der folgende CSS-Selektor wählt beispielsweise jedes Element in HTML aus:

* {
  margin: 0;
  padding: 0;
}

8. Attribute-Selektor

Attribute-Selektor wählt Elemente anhand ihrer Attributwerte aus. Der folgende CSS-Selektor wählt beispielsweise alle Elemente aus, deren Klassenattribut „my“ enthält:

[class*="my"] {
  background-color: green;
}

Zusammenfassung:

Der CSS-Selektor kann Elemente basierend auf Tags, Klassen, IDs, Attributen und anderen Merkmalen im HTML-Dokument auswählen und ändern sein Stil. In diesem Artikel werden 8 häufig verwendete CSS-Selektoren vorgestellt, mit denen häufig auftretende Stilprobleme gelöst werden können. Es ist wichtig zu beachten, dass die korrekte Verwendung von CSS-Selektoren den CSS-Code von Entwicklern prägnanter und klarer machen kann.

Das obige ist der detaillierte Inhalt vonWie viele Arten von CSS-Selektoren gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!