Wie kann ich CSS-Klassen basierend auf einem Präfix effizient zuordnen?

CSS-Selektoren für den Klassenpräfixabgleich

Die Umsetzung einer CSS-Regelanwendung basierend auf einem bestimmten Klassenpräfix kann eine Herausforderung darstellen. Während CSS 2.1 diese Fähigkeit fehlt, bietet CSS3 eine Lösung mit Attribut-Teilzeichenfolgen-Matching-Selektoren.

CSS3-Lösung:

CSS3 führt die [class^="prefix-" ] und [class*=" prefix-"] Selektoren. Ersteres stimmt mit Elementen überein, deren Klassenattribut mit „prefix-“ beginnt, während letzteres mit Elementen übereinstimmt, die „prefix-“ nach einem Leerzeichen enthalten.

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

Diese Kombination stellt die Übereinstimmung für Elemente sicher, deren Klassenattribut eine der beiden Bedingungen erfüllt . Die Verwendung eines Leerzeichens im zweiten Selektor verhindert Übereinstimmungen für Elemente mit Klassennamen wie „status-bar“. Es überprüft jedoch effektiv nachfolgende Klassen, wenn mehrere angegeben sind, oder berücksichtigt Leerzeichen im Attributwert.

Robustheit:

Beachten Sie, dass die Verwendung von [class= „status-“] allein kann zu unerwünschten Übereinstimmungen führen, beispielsweise bei Elementen mit einem Klassennamen wie „foo-status-bar“. Die Kombination von [class^="status-"] und [class="status-"] sorgt für eine größere Robustheit.

Alternativer Ansatz:

If Wenn dies möglich ist, sollten Sie erwägen, eine dedizierte Klasse mit dem Statuspräfix zu erstellen, um die CSS-Regel zu vereinfachen. Dieser Ansatz kann die Notwendigkeit komplexer Attributselektoren vermeiden.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Klassen basierend auf einem Präfix effizient zuordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!