Wie kann ich CSS-Elemente mit einem beliebigen Attributwert gezielt ansprechen?

Targeting von Elementen mit attributierten Werten in CSS

CSS ermöglicht Entwicklern die Auswahl spezifischer Elemente basierend auf Attributen. Während die Ausrichtung auf Elemente mit einem vordefinierten Attributwert unkompliziert ist, kann sich die Ausweitung auf einen beliebigen Attributwert als schwierig erweisen.

Problemstellung

Können wir Elemente mit einem beliebigen Attributwert auswählen? ähnlich wie:

a[rel=*]
{
    color: red;
}

Dieser Selektor sollte mit Folgendem übereinstimmen HTML:

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

Lösung

Um auf einen nicht leeren Attributwert abzuzielen, verwenden Sie den folgenden Selektor:

a[rel]
{
    color: red;
}

Dieser Selektor wird Passen Sie alle Ankertags mit dem Attribut „rel“ an.

Leere Handhabung Werte

Wenn es jedoch darum geht, zwischen leeren und nicht leeren Attributwerten zu unterscheiden, führen Sie die CSS-Pseudoklasse „:not“ ein:

a[rel]:not([rel=""])
{
    color: red;
}

Dieser Selektor wird Wählen Sie Ankertags mit einem „rel“-Attribut aus, das nicht leer ist.

Zusätzlich Hinweis

Standardmäßig wird auf HTML-Ankertags mit einem „href“-Attribut der Stil „Cursor: Zeiger“ angewendet. Diese Funktion unterstreicht die Möglichkeit, Elemente basierend auf dem Vorhandensein eines beliebigen Attributwerts auszuwählen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Elemente mit einem beliebigen Attributwert gezielt ansprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!