Wie kann ich Elemente mit einem beliebigen „Daten“-Attribut in CSS auswählen?

CSS-Selektor für Attributnamen basierend auf einem Platzhalter

Bei der Arbeit mit CSS-Selektoren ist das Targeting von Elementen basierend auf ihren Attributen unerlässlich. Die „data-*“-Attribute bieten eine praktische Möglichkeit, benutzerdefinierte Daten für Elemente zu speichern. Es kann jedoch Fälle geben, in denen Sie Elemente auswählen müssen, die über ein beliebiges „Daten“-Attribut verfügen, unabhängig von seinem spezifischen Namen.

Aktueller Status des Attributnamen-Targetings

Derzeit bietet CSS keine native Unterstützung für Platzhalterselektoren für Attributnamen. Der Vorschlag [data-*] ist eine faszinierende Idee, wurde aber noch nicht umgesetzt.

Bestehende Optionen

Es gibt zwar keine direkte Lösung für die Verwendung von Platzhaltern für Attributnamen, aber Sie kann die folgenden CSS-Selektoren verwenden:

[data]

Dieser Selektor zielt auf jedes Element mit einem „Daten“-Attribut ab, unabhängig von seinem Namen. Allerdings kann es zu einer versehentlichen Auswahl von Elementen mit anderen Attributen kommen, die mit „data“ beginnen.

Vorgeschlagene Syntax

Ein vielversprechender Syntaxvorschlag aus der [email protected] Mailingliste lautet:

x-admin-* { ... }
[data-my-*] { ... }

Diese Syntax würde den Platzhalterabgleich innerhalb des Präfixes eines Attributnamens ermöglichen und so ein spezifischeres Targeting ermöglichen.

Fazit

Derzeit gibt es keine direkte Möglichkeit, Elemente basierend auf einem Platzhalter-Attributnamen in CSS anzusprechen. Die vorgeschlagene Syntax ist jedoch vielversprechend für zukünftige Entwicklungen, die eine vielseitigere und effizientere attributbasierte Auswahl ermöglichen würden.

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente mit einem beliebigen „Daten“-Attribut in CSS auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!