Wie kann ich CSS-Elemente basierend auf Klassenpräfixen auswählen?

Attributbasierte CSS-Selektoren für Klassenpräfixe

In CSS kann das Identifizieren von Elementen basierend auf Klassenpräfixen eine verwirrende Aufgabe sein. Stellen Sie sich das Szenario vor, in dem Sie eine Regel auf jedes Element anwenden möchten, dessen Klasse mit einem bestimmten Präfix beginnt, z. B. „status-“.

CSS-Kompatibilität

Bedauerlicherweise In CSS 2.1 fehlen für diese Aufgabe die notwendigen Selektoren. CSS3 führt jedoch Attribut-Teilzeichenfolgen-Matching-Selektoren ein, die neue Möglichkeiten eröffnen.

CSS3-Attributselektoren

Die CSS3-Attributselektoren, die das bewältigen können Diese Herausforderung ist:

• [class^="status-"]: Entspricht Elementen, deren Klassenattribut beginnt mit „status-“.
• [class*=" status-"]: Entspricht Elementen, deren Klassenattribut die Teilzeichenfolge „status-“ enthält, der unmittelbar ein Leerzeichen vorangestellt ist. Beachten Sie das Leerzeichen, das sicherstellt, dass die Übereinstimmung nicht mit anderen Klassen erfolgt.

Kombination von Selektoren

Um alle gewünschten Elemente zu erfassen, müssen Sie diese kombinieren zwei Selektoren:

div[class^="status-"], div[class*=" status-"]

Diese Kombination stellt sicher, dass Elemente mit Klassen, die mit „status-“ beginnen, und Elemente mit einem „status-“-Teilstring, der auf ein Leerzeichen folgt, ausgewählt werden sind beide ausgewählt.

Vorsichtsmaßnahmen und Alternativen

Beachten Sie, dass der [class*="status-"]-Selektor mit unerwünschten Elementen übereinstimmen kann, wenn Ihr HTML-Code Klassen wie enthält „foo-status-bar“. Um dies zu vermeiden, stellen Sie sicher, dass solche Szenarien unmöglich sind.

Wenn Sie alternativ die Kontrolle über den HTML-Code oder die Anwendung haben, die das Markup generiert, kann es einfacher sein, eine dedizierte „Status“-Klasse mit einem eigenen Präfix zu erstellen. Dies vereinfacht den Prozess und sorgt für Konsistenz.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Elemente basierend auf Klassenpräfixen auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!