Welche Zeichen / Symbole sind in den CSS- Klassenselektoren zulässig ?
Ich weiß, dass die folgenden Zeichen ungültig sind , aber welche Zeichen sind gültig ?
~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
css
css-selectors
Darryl Hein
quelle
quelle
.hello/world
durch die Flucht der Backslash Klasse:.hello\2fworld
,hello\2f world
oderhello\/world
Antworten:
Sie können direkt in der CSS-Grammatik überprüfen .
Grundsätzlich 1 muss ein Name mit einem Unterstrich (beginnen
_
), einen Bindestrich (-
) oder einen Brief (a
-z
), gefolgt von einer beliebigen Anzahl von Bindestrichen, Unterstrichen, Buchstaben oder Zahlen. Es gibt einen Haken: Wenn das erste Zeichen ein Bindestrich ist, muss das zweite Zeichen 2 ein Buchstabe oder ein Unterstrich sein und der Name muss mindestens 2 Zeichen lang sein.Kurz gesagt, die vorherige Regel wird wie folgt übersetzt und aus der W3C-Spezifikation extrahiert . ::
Bezeichner, die mit einem Bindestrich oder Unterstrich beginnen, sind normalerweise für browserspezifische Erweiterungen reserviert, wie in
-moz-opacity
.1 Durch die Aufnahme von maskierten Unicode-Zeichen (die niemand wirklich verwendet) wird alles etwas komplizierter.
2 Beachten Sie, dass gemäß der von mir verknüpften Grammatik eine Regel, die mit ZWEI Bindestrichen beginnt, z
--indent1
. B. ungültig ist. Ich bin mir jedoch ziemlich sicher, dass ich dies in der Praxis gesehen habe.quelle
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F"
. Also ---indent1
ist ungültig und muss\--indent1
--
Zu meiner Überraschung sind die meisten Antworten hier falsch. Es stellt sich heraus, dass:
Jedes Zeichen außer NUL ist in CSS-Klassennamen in CSS zulässig. (Wenn CSS NUL enthält (maskiert oder nicht), ist das Ergebnis undefiniert. [ CSS-Zeichen ])
Mathias Bynens' Antwort Links zu Erklärungen und Demos zeigen , wie diese Namen zu verwenden. In CSS-Code geschrieben, muss ein Klassenname möglicherweise maskiert werden werden, dies ändert jedoch nichts am Klassennamen. Beispielsweise sieht eine unnötig überstrichene Darstellung anders aus als andere Darstellungen dieses Namens, bezieht sich jedoch immer noch auf denselben Klassennamen.
Die meisten anderen (Programmier-) Sprachen haben nicht das Konzept, Variablennamen („Bezeichner“) zu maskieren, daher müssen alle Darstellungen einer Variablen gleich aussehen. Dies ist in CSS nicht der Fall.
Beachten Sie, dass es in HTML keine Möglichkeit gibt, Leerzeichen (Leerzeichen, Tabulator, Zeilenvorschub, Formularvorschub und Wagenrücklauf) in ein Klassennamenattribut aufzunehmen , da sie bereits Klassen voneinander trennen.
Wenn Sie also eine zufällige Zeichenfolge in einen CSS-Klassennamen umwandeln müssen: Achten Sie auf NUL und Leerzeichen und maskieren Sie (entsprechend für CSS oder HTML). Erledigt.
quelle
Ich habe Ihre Frage hier ausführlich beantwortet: http://mathiasbynens.be/notes/css-escapes
Der Artikel erklärt auch, wie man Zeichen in CSS (und JavaScript) maskiert, und ich habe auch dafür ein praktisches Tool erstellt . Von dieser Seite:
quelle
class="404-error"
können nützlich sein.<p class="foo bar">
fügt demp
Element zwei Klassen hinzu :foo
, undbar
. Es gibt keine Möglichkeit (die ich mir vorstellen kann), einem HTML-Element einen Klassennamen hinzuzufügen, der Leerzeichen enthält. Die Informationen zum Escapezeichen von Leerzeichen wurden eingefügt, da es nützlich ist, solche Zeichen in anderen Bezeichnerkontexten, z. B. Namen von Schriftfamilien, zu maskieren.Lesen Sie die W3C-Spezifikation . (Dies ist CSS 2.1. Finden Sie die geeignete Version für Ihre Annahme von Browsern.)
bearbeiten: relevanter Absatz folgt:
edit 2: wie @mipadi in Triptychs Antwort hervorhebt, gibt es diese Einschränkung , auch auf derselben Webseite:
quelle
Der vollständige reguläre Ausdruck lautet:
Daher sind alle aufgelisteten Zeichen außer "
-
" und "_
" nicht zulässig, wenn sie direkt verwendet werden. Sie können sie jedoch mit einem Backslashfoo\~bar
oder der Unicode-Notation codierenfoo\7E bar
.quelle
[\200-\377]
?[\178-\1114112]
ist in CSS 3 ohne Flucht erlaubt\377
hier ist eigentlich falsch. In der Grammatik des Lexical Scanner-Abschnitts von CSS2.1 heißt es: "Das" \ 377 "stellt die höchste Zeichennummer dar, mit der aktuelle Versionen von Flex umgehen können (Dezimalzahl 255). Es sollte als" \ 4177777 "( Dezimalzahl 1114111), dies ist der höchstmögliche Codepunkt in Unicode / ISO-10646. " Es sollte auch von\240
nicht sein\377
. Ich denke, das ist jetzt 7 Jahre alt, also haben sich die Dinge seitdem wahrscheinlich ein bisschen geändert.-?(?:[_a-z]|(?![\u0000-\u0239]).*|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|(?![\u0000-\u0239]).*|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*
.Für diejenigen, die nach einer Problemumgehung suchen, können Sie beispielsweise eine Attributauswahl verwenden, wenn Ihre Klasse mit einer Zahl beginnt. Veränderung:
dazu:
Wenn es mehrere Klassen gibt, müssen Sie sie meiner Meinung nach im Selektor angeben.
Quellen:
quelle
Mein Verständnis ist, dass der Unterstrich technisch gültig ist. Auschecken:
https://developer.mozilla.org/en/underscores_in_class_and_id_names
"... Errata gemäß der Anfang 2001 veröffentlichten Spezifikation unterstrichen erstmals legal."
Der oben verlinkte Artikel besagt, dass sie niemals verwendet werden, und enthält dann eine Liste von Browsern, die sie nicht unterstützen. Alle Browser sind zumindest in Bezug auf die Anzahl der Benutzer lange redundant.
quelle
Bei HTML5 / CSS3 können Klassen und IDs mit Zahlen beginnen.
quelle
class="1a"
. B. ). Ein CSS-Bezeichner kann jedoch nicht mit einer Nummer beginnen (z. B..1a
funktioniert nicht). Sie können es entkommen, hart (zB.\31 a
oder.\000031a
).Wenn Sie die Antwort von @ Triptych verlassen, können Sie die folgenden 2 Regex-Übereinstimmungen verwenden, um eine Zeichenfolge gültig zu machen:
Dies ist eine umgekehrte Übereinstimmung, bei der alles ausgewählt wird, was kein Buchstabe, keine Zahl, kein Bindestrich oder kein Unterstrich ist, um das Entfernen zu vereinfachen.
Dies entspricht 0 oder 1 Strichen, gefolgt von 1 oder mehr Zahlen am Anfang einer Zeichenfolge, auch zum einfachen Entfernen.
Wie ich es in PHP benutze:
quelle