Welche Zeichen sind gültig in CSS-Klassennamen/Selektoren?

Question

Welche Zeichen/Symbole sind innerhalb der CSS-Klassenselektoren erlaubt?

Ich weiß, dass die folgenden Zeichen ungültig sind, aber welche Zeichen sind gültig?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

Answer 1

Basierend auf Kenan Banks Antwort können Sie die folgenden beiden Regex-Matches verwenden, um einen String gültig zu machen:

[^a-z0-9A-Z_-]

Dies ist ein umgekehrtes Match, das alles auswählt, was kein Buchstabe, Zahl, Bindestrich oder Unterstrich ist, um es einfach zu entfernen.

^-*[0-9]+

Dieses Match wählt 0 oder 1 Bindestriche gefolgt von 1 oder mehr Zahlen am Anfang eines Strings aus, auch zum einfachen Entfernen.

Wie ich es in PHP verwende:

// Alphanumerische Zeichen mit Bindestrichen und Unterstrichen machen (entfernt alle anderen Zeichen)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);

// Klassen beginnen nur mit einem Unterstrich oder Buchstaben
$class = preg_replace("/^-*[0-9]+/", "", $class);

// Stellen Sie sicher, dass der String zwei oder mehr Zeichen lang ist
return 2 <= strlen($class) ? $class : '';