html Elemente mit einem Attributwert in CSS

In CSS sind es möglich, Elemente zu zielen, die auf bestimmten Attributen basieren, wie im folgenden Beispiel illustriert:

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

. Schriftfamilie: Konsolas; }

Es stellt sich jedoch eine gemeinsame Frage: Können Elemente basierend auf einem Attributwert gezielt? In diesem Artikel wird dieses Thema untersucht.

unter Verwendung des Attributs -Selektors

, um Elemente mit einem Attributwert abzurichten, kann der Attribut -Selektor verwendet werden. Indem Sie den Wert nach dem Attributnamen weglassen, werden alle Elemente mit diesem Attribut ausgewählt. Zum Beispiel:

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

a [rel] { Farbe: Rot; }

Mit dieser Regel würde das bereitgestellte HTML -Snippet das erste und dritte Tags in rot stylen:

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

rotes Text Standardtext rotes text wieder

Dieses Verhalten spiegelt den Standard-Cursor wider: Attributwerte. Dies kann mit der: Nicht-Pseudoklasse in Verbindung mit dem Attribut-Selektor erreicht werden:

a [rel]: nicht ([rel = ""]) { Farbe: Rot; }

Diese Regel zielt auf alle Anker -Tags mit einem REL -Attribut ab, ausgenommen diejenigen, bei denen der Wert leer ist (d. H. Es wird kein Wert angegeben).