Können Sie mit CSS auf Elemente basierend auf dem Vorhandensein eines „data-*'-Attributs abzielen?

Auswahl von Attributnamen mit Platzhaltern

In der Webentwicklung bieten CSS-Selektoren eine präzise Kontrolle über HTML-Elemente basierend auf ihren Attributen. Unter den verschiedenen attributbasierten Selektoren besteht ein besonderer Bedarf für die Ausrichtung auf Elemente, die über ein beliebiges „data-*“-Attribut verfügen. Während es verschiedene Methoden gibt, Elemente basierend auf dem Wert des Attributs auszuwählen, stellt sich die Frage: Können wir Elemente ausschließlich basierend auf dem Vorhandensein eines „Daten“-Attributs gezielt auswählen?

Um die aktuellen Möglichkeiten zu verstehen, untersuchen wir das vorhandene Attribut Wertbasierte Selektoren:

• Genaue Übereinstimmung: Wählt Elemente aus, bei denen der Attributwert einem angegebenen Wert entspricht ([data-something="value"]).
• Teilweise Übereinstimmung (Anfang): Wählt Elemente aus, bei denen der Attributwert mit einem angegebenen Präfix beginnt ([data-something^="value "]).
• Teilweise Übereinstimmung (Ende): Wählt Elemente aus, bei denen der Attributwert mit einem angegebenen Suffix endet ([data-something$="value"]).
• Teilweise Übereinstimmung (überall): Wählt Elemente aus, bei denen der Attributwert eine angegebene Teilzeichenfolge enthält ([data-something*="value "]).

Für den speziellen Fall der Ausrichtung auf Elemente basierend auf dem Attributnamen selbst gibt es jedoch nur ein einziges Option:

• Attribute Name Present: Wählt Elemente aus, die ein bestimmtes Attribut besitzen ([data-something]).

Leider gibt es derzeit solche keine Platzhalterselektoren für Attributnamen, wie zum Beispiel [data-*]. Dies bedeutet, dass es nicht möglich ist, mit CSS allein auf Elemente abzuzielen, die über ein „Daten“-Attribut verfügen.

Dennoch gibt es im Rahmen der Selectors Level 3-Spezifikation laufende Bemühungen, Platzhalterfunktionen für Attributnamen einzuführen. Eine vorgeschlagene Syntax, die sich durchgesetzt hat, ist:

• x-admin-*: Wählt Elemente mit einem Attributnamen aus, der mit „x-admin-“ beginnt.
• [data-my-*]: Wählt Elemente mit einem Attributnamen aus, der mit beginnt „data-my-“.

Obwohl diese Selektoren noch nicht Teil des Standards sind, zeigen sie das Potenzial für die Verwendung von Platzhaltern für Attributnamen in der Zukunft.

Das obige ist der detaillierte Inhalt vonKönnen Sie mit CSS auf Elemente basierend auf dem Vorhandensein eines „data-*'-Attributs abzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!