Kann CSS auf HTML-Elemente basierend auf einem beliebigen Attributwert abzielen?

Targeting von HTML-Elementen mit einem beliebigen Attributwert in CSS

In CSS ist es möglich, Elemente basierend auf bestimmten Attributen anzusprechen, wie in dargestellt Das Beispiel unten:

input[type=text] {
    font-family: Consolas;
}

Es stellt sich jedoch häufig die Frage: Können Elemente basierend auf einem beliebigen Attributwert gezielt ausgewählt werden? Dieser Artikel befasst sich mit diesem Thema.

Verwendung des Attributselektors

Um Elemente mit einem beliebigen Attributwert anzusprechen, kann der Attributselektor verwendet werden. Durch Weglassen des Werts nach dem Attributnamen werden alle Elemente mit diesem Attribut ausgewählt. Zum Beispiel:

a[rel] {
    color: red;
}

Mit dieser Regel würde das bereitgestellte HTML-Snippet das erste und dritte formatieren. Tags in Rot:

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

Dieses Verhalten spiegelt den Standardcursor wider: Zeigerstil angewendet auf Tags mit definierten href-Attributen.

Umgang mit leeren Attributwerten

In bestimmten Fällen kann es notwendig sein, zwischen leeren und nicht leeren Attributwerten zu unterscheiden. Dies kann mithilfe der :not-Pseudoklasse in Verbindung mit dem Attributselektor erreicht werden:

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

Diese Regel zielt auf alle Anker-Tags mit einem rel-Attribut ab, mit Ausnahme derjenigen, bei denen der Wert leer ist (d. h. keinen Wert). angegeben ist).

Das obige ist der detaillierte Inhalt vonKann CSS auf HTML-Elemente basierend auf einem beliebigen Attributwert abzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!