Kann CSS Elemente basierend auf Klassenpräfixen auswählen?

Ist eine präfixbasierte CSS-Klassenauswahl möglich?

Im Bereich der Webentwicklung ist es oft notwendig, CSS-Regeln auf elementbasierte Elemente anzuwenden auf bestimmte Klassenpräfixe. Beispielsweise möchten Sie möglicherweise auf Elemente abzielen, deren Klassen mit dem Präfix „status-“ beginnen.

Mit CSS2.1 geht das nicht.

Leider CSS2 .1 bietet keine direkte Möglichkeit, eine präfixbasierte Klassenauswahl zu erreichen. Zu unserer Rettung kommen jedoch CSS3-Attribut-Substring-Matching-Selektoren.

Präfixbasierte Auswahl mit CSS3

CSS3 führt zwei Attributselektoren ein, die uns helfen können:

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

Aufschlüsselung der Selektoren:

• [class^="status-"] – Entspricht Elementen, deren Klassenattribut mit „status-“ beginnt.
• [class*="status-" ] – Entspricht Elementen, deren Klassenattribut „status-“ in einer durch Leerzeichen getrennten Zeichenfolge enthält.

Durch die Kombination dieser beiden Selektoren wird sichergestellt, dass wir alle geeigneten Elemente abfangen. sogar solche mit mehreren durch Leerzeichen getrennten Klassen.

Noch ein Problem

Beachten Sie, dass die einfache Verwendung von [class*="status-"] auch mit Elementen wie:

<div>

Um dies zu vermeiden, kombinieren Sie am besten die beiden Selektoren wie gezeigt oben.

Andere Optionen

Wenn Sie die Kontrolle über das HTML-Markup haben, besteht ein einfacherer Ansatz darin, das Statuspräfix in eine eigene Klasse zu unterteilen, wie zum Beispiel:

<div>

Dadurch können Sie Elemente mit [class="status-important"] gezielt ansprechen.

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