So verwenden Sie CSS3-Attributselektoren, um die Rolle von JS zu ersetzen

Wir wissen, dass es in CSS3 neben der Einführung von Spezialeffekten wie Animationen und Filtern sowie neuen Layout-Technologien auch Verbesserungen bei Selektoren gibt, die in der Vergangenheit nur in JS möglich waren durch CSS-Technologie vervollständigt werden, dann stelle ich Ihnen den leistungsstarken CSS3-Attributselektor

vor, um Elemente basierend auf ihren Attributen abzugleichen. Dies kann ein einzelnes Attribut sein, beispielsweise [Typ], oder eine Kombination aus Attributen und Werten, beispielsweise [Typ=Checkbox] oder [for="email"].

Wir können auch Attributselektoren verwenden, um das Vorhandensein oder Fehlen von Attributen und Unterzeichenfolgen

abzugleichen. Beispielsweise können wir Attributwerte in einer durch Leerzeichen getrennten Liste abgleichen, oder wir können Attributwerte abgleichen, die mit der Zeichenfolge tel: beginnen. Wir können sogar Attributwerte mit Bindestrichen wie „en-US“ abgleichen. Bindestrich-Matching und durch Leerzeichen getrennter Attributwertlisten-Matching wurden bereits in CSS2 definiert. Die Erweiterung von CSS3 besteht in der Hinzufügung partieller Matching-Regeln. Dieser Artikel konzentriert sich auf die Verwendung der neu eingeführten Attributselektoren (Attributselektoren).

1. Teilweiser Abgleich

Es ist eine sehr verbreitete Methode, alle Attributwerte zum Abgleichen zu verwenden, aber in CSS3 können wir einen teilweisen Abgleich verwenden. Das Syntaxformat ist:

[att ~=val]

Hier repräsentiert att ein Attribut und val einen Wert in einer durch Leerzeichen getrennten Liste von Attributwerten. Die Tilde ~ repräsentiert die Semantik einer Teilübereinstimmung.

Zum Beispiel:

ikinsoft

2. Teilstring-Abgleich

Wir können Attributwerte auch über Teilstrings abgleichen, ähnlich wie

reguläre Ausdrücke

: ^=: Match from the head

$=: Übereinstimmungen mit dem Ende

*=: Enthält einen bestimmten Teilstring

Zum Beispiel der folgende HTML-Code:

Online-Support von ikinsoft anrufen

Ich glaube, dass Sie die Methode nach dem Lesen dieser Fälle beherrschen. Weitere spannende Inhalte finden Sie unter andere chinesische PHP-Websites Verwandte Artikel!

Verwandte Lektüre:

Detaillierte Einführung in das Übersetzungsattribut in CSS3

Schritte zum Implementieren des rotierenden Halo-Effekts in CSS3

Schritte zum Implementieren von CSS3-Breadcrumb-Code im kreisförmigen Stil

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3-Attributselektoren, um die Rolle von JS zu ersetzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!