Entmystifizierung von CSS-Eigenschaftsselektoren

Geheimnisse der CSS-Attributauswahl enthüllt

CSS-Attributauswahl ist ein sehr nützliches und leistungsstarkes Tool, mit dem wir bestimmte Elemente anhand ihrer Attributwerte auswählen und formatieren können. Diese Attributselektoren können basierend auf dem Attributwert des Elements, der Stelle, an der der Attributwert erscheint, und bestimmten Zeichen im Attributwert eine Übereinstimmung und Auswahl treffen. In diesem Artikel werden die Geheimnisse von CSS-Attributselektoren anhand spezifischer Codebeispiele enthüllt.

Erstens lernen wir einige grundlegende CSS-Attributselektoren kennen. Der gebräuchlichste Attributselektor ist „[attribute]“, der zur Auswahl von Elementen mit einem angegebenen Attribut verwendet wird. Wenn wir beispielsweise alle Elemente mit dem Attribut „title“ auswählen möchten, können wir den folgenden Code verwenden:

[title] {
  color: blue;
}

Auf diese Weise wird auf alle Elemente mit dem Attribut „title“ die blaue Textfarbe angewendet.

Neben einfachen Attributselektoren gibt es auch einige erweiterte Attributselektoren, die verwendet werden können. Beispielsweise können wir einen Attributwertselektor verwenden, um Elemente mit einem bestimmten Attributwert auszuwählen. Der Attributwertselektor wird als „[attribute=value]“ geschrieben. Hier ist ein Beispiel:

input[type="text"] {
  border: 1px solid black;
}

Dieser Code wählt alle Eingabefelder vom Typ „Text“ aus und legt ihren Rahmenstil auf eine durchgezogene schwarze Linie fest.

Ein weiterer leistungsstarker Attributselektor ist „[attribute^=value]“, der Elemente auswählen kann, deren Attributwert mit einer bestimmten Zeichenfolge beginnt. Wenn wir beispielsweise alle Elemente auswählen möchten, deren Links mit „http://“ beginnen, können wir den folgenden Code verwenden:

a[href^="http://"] {
  color: red;
}

Auf diese Weise erhalten alle Links, die mit „http://“ beginnen, einen roten Text Farbe aufgetragen.

Ähnlich gibt es auch den Attributselektor „[attribute$=value]“, der Elemente auswählt, deren Attributwert mit einer bestimmten Zeichenfolge endet. Wenn wir beispielsweise alle Elemente auswählen möchten, deren Links mit „.com“ enden, können wir den folgenden Code verwenden:

a[href$=".com"] {
  text-decoration: underline;
}

Dieser Code unterstreicht alle Links, die mit „.com“ enden.

Schließlich gibt es noch den Attributselektor „[attribute*=value]“, der Elemente auswählt, deren Attributwert eine bestimmte Zeichenfolge enthält. Wenn wir beispielsweise alle Elemente auswählen möchten, die „google“ in ihren Links enthalten, können wir den folgenden Code verwenden:

a[href*="google"] {
  font-weight: bold;
}

Auf diese Weise wird der Fettdruck auf alle Links angewendet, die „google“ enthalten.