Können CSS-Selektoren auf Elemente basierend auf Klassenpräfixen abzielen?

Können CSS-Selektoren auf Elemente basierend auf Klassenpräfixen abzielen?

In Szenarien, in denen Sie CSS-Regeln auf Elemente anwenden möchten, die eine gemeinsam genutzte Klasse haben Präfix, CSS2.1 weist Einschränkungen auf. Mit der Einführung von CSS3-Attribut-Substring-Matching-Selektoren wird dies jedoch machbar.

Um dies zu erreichen, verwenden Sie die folgenden Attributselektoren:

• [class^=" status-"]: Entspricht Elementen mit Klassennamen, die mit „status-" beginnen.
• [class*=" status-"]: Findet Elemente mit Klassennamen, die „status-" direkt nach einem Leerzeichen enthalten.

Durch die Kombination dieser Selektoren wird es möglich, Elemente anzusprechen, deren Klassenattribute den angegebenen entsprechen Bedingungen, einschließlich Fällen, in denen mehrere Klassen vorhanden sind:

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

Es ist wichtig zu beachten, dass der obige Ansatz den Abgleich von Elementen mit Klassenattributen wie „foo-status-bar“ vermeidet, was möglicherweise der Fall ist unerwünscht sein.

Alternative Lösungen können die Verwendung von jQuery oder die Umstrukturierung des HTML-Markups umfassen, um Statuspräfixe explizit als separate Klassen einzubeziehen. Allerdings bieten die CSS3-Teilzeichenfolgen-Matching-Selektoren eine robuste und reine CSS-Lösung für die Adressierung von Klassenpräfixen in Stilregeln.

Das obige ist der detaillierte Inhalt vonKönnen CSS-Selektoren auf Elemente basierend auf Klassenpräfixen abzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!