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


Welche Zeichen / Symbole sind in CSS-Klassenselektoren zulässig? Ich weiß, dass die folgenden Charaktere sind ungültig, aber welche Charaktere sind gültig?

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

1053
2018-01-15 23:37


Ursprung


Antworten:


Sie können direkt bei der CSS-Grammatik.

Grundsätzlich gilt1, ein Name muss mit einem Unterstrich beginnen (_), ein Bindestrich (-) oder ein 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 Zeichen2 ein Buchstabe oder Unterstrich sein, und der Name muss mindestens 2 Zeichen lang sein.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

Bezeichner, die mit einem Bindestrich oder einem Unterstrich beginnen, sind in der Regel für browserspezifische Erweiterungen reserviert, wie in -moz-opacity.

1 Es ist alles ein bisschen komplizierter durch die Einbeziehung von Unicode-Zeichen (die niemand wirklich benutzt).

2 Beachten Sie, dass gemäß der Grammatik, die ich verknüpft habe, eine Regel, die mit ZWEI Bindestrichen beginnt, z. --indent1, ist ungültig. Ich bin mir aber ziemlich sicher, dass ich das in der Praxis gesehen habe.


914
2018-01-15 23:42



Zu meiner Überraschung sind die meisten Antworten hier falsch. Es stellt sich heraus, dass:

Ein beliebiges Zeichen außer NUL ist in CSS-Klassennamen in CSS zulässig. (Wenn CSS NULL enthält (Escape oder Nicht), ist das Ergebnis nicht definiert. [CSS-Zeichen])

Mathias Bynens 'Antwort Links zu Erläuterung und Demos zeigt, wie man diese Namen benutzt. Aufgeschrieben im CSS-Code ein Klassenname Möglicherweise müssen Sie entkommen, aber das ändert den Klassennamen nicht. Z.B. Eine unnötig überstrichene Darstellung sieht anders aus als andere Darstellungen dieses Namens, verweist jedoch immer noch auf denselben Klassennamen.

Die meisten anderen (Programmier-) Sprachen haben nicht das Konzept, Variablennamen ("Bezeichner") zu umgehen, so dass alle Darstellungen einer Variablen gleich aussehen müssen. Dies ist in CSS nicht der Fall.

Beachten Sie, dass in HTML keine Möglichkeit zum Einschließen besteht Leerzeichen (Leerzeichen, Tabulator, Zeilenvorschub, Seitenvorschub und Wagenrücklauf) in einem Klassennamenattributweil sie bereits Klassen voneinander trennen.

Also, wenn Sie eine zufällige Zeichenfolge in einen CSS-Klassennamen verwandeln müssen: kümmern Sie sich um NUL und Leerzeichen und escape (entsprechend für CSS oder HTML). Erledigt.


138
2017-07-18 12:32



Lies das W3C Spezifikation. (Dies ist CSS 2.1, finden Sie die passende Version für Ihre Annahme von Browsern)

edit: relevanter Absatz folgt:

In CSS, Bezeichner (einschließlich   Elementnamen, Klassen und IDs in   Selektoren) können nur die   Zeichen [a-z0-9] und ISO 10646   Zeichen U + 00A1 und höher, plus die   Bindestrich (-) und der Unterstrich (_);   Sie können nicht mit einer Ziffer beginnen, oder a   Bindestrich gefolgt von einer Ziffer.   Bezeichner können auch maskiert enthalten   Zeichen und ein beliebiges ISO 10646-Zeichen   als numerischer Code (siehe nächster Punkt). Zum   Beispiel, die Kennung "B & W?" könnte sein   geschrieben als "B \ & W \?" oder "B \ 26 W \ 3F".

edit 2: wie @mipadi in Triptychs Antwort darauf hinweist, gibt es das Vorbehalt, auch auf derselben Webseite:

In CSS können Bezeichner mit '-' beginnen   (Bindestrich) oder '_' (Unterstrich). Schlüsselwörter   und Eigenschaftsnamen beginnend mit '-'   oder '_' sind reserviert für   herstellerspezifische Erweiterungen. Eine solche   herstellerspezifische Erweiterungen sollten haben   eines der folgenden Formate:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

Beispiel (e):

Zum Beispiel, wenn XYZ-Organisation hinzugefügt wurde   eine Eigenschaft zur Beschreibung der Farbe von   die Grenze auf der Ostseite der   anzeigen, könnten sie es nennen   -xyz-Grenze-Ost-Farbe.

Andere bekannte Beispiele:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

Ein erster Strich oder Unterstrich ist   garantiert nie in einem verwendet werden   Eigenschaft oder Schlüsselwort von jedem aktuellen oder   zukünftiges Niveau von CSS. Also typisches CSS   Implementierungen können solche nicht erkennen   Eigenschaften und kann sie ignorieren   nach den Regeln für die Handhabung   Parsingfehler. Da aber die   Anfangsstrich oder Unterstrich ist Teil von   die Grammatik, CSS 2.1-Implementierer   sollte immer in der Lage sein, a zu verwenden   CSS-konformer Parser, ob oder nicht   sie unterstützen alle herstellerspezifischen   Erweiterungen.

Autoren sollten herstellerspezifisch vermeiden   Erweiterungen


64
2018-01-15 23:45



Ich habe Ihre Frage hier ausführlich beantwortet: http://mathiasbynens.be/notes/css-escapes

Der Artikel erklärt auch, wie man jedes Zeichen in CSS (und JavaScript) entkommt, und ich machte ein praktisches Werkzeug auch dafür. Von dieser Seite:

Wenn Sie einem Element einen ID-Wert von ~!@$%^&*()_+-=,./';:"?><[]{}|`#würde der Selektor so aussehen:

CSS:

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

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>

58
2017-07-06 06:41



Der vollständige reguläre Ausdruck ist:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

Also alle von Ihnen aufgeführten Zeichen außer "-" und "_"Sind nicht erlaubt, wenn sie direkt verwendet werden. Sie können sie jedoch mit einem umgekehrten Schrägstrich codieren foo\~bar oder mit der Unicode-Notation foo\7E bar.


21
2018-01-16 00:05



Bei HTML5 / CSS3 können Klassen und IDs mit Zahlen beginnen.


6
2017-10-12 14:04



Wenn Sie nach einer Problemumgehung suchen, können Sie beispielsweise einen Attributselektor verwenden, wenn Ihre Klasse mit einer Zahl beginnt. Veränderung:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

zu diesem:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

Wenn es mehrere Klassen gibt, müssen Sie sie im Selektor angeben, denke ich.

Quellen:

  1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
  2. Gibt es eine Problemumgehung, um CSS-Klassen mit Namen, die mit Zahlen beginnen, gültig zu machen?

6
2018-06-23 17:33



Mein Verständnis ist, dass der Unterstrich technisch gültig ist. Auschecken:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

"... Errata zu der Spezifikation, die Anfang 2001 veröffentlicht wurde, machte Unterstreichungen zum ersten Mal legal."

Der oben verlinkte Artikel sagt, dass sie niemals verwendet werden sollen, und gibt dann eine Liste von Browsern an, die sie nicht unterstützen, von denen alle hinsichtlich der Anzahl der Benutzer mindestens redundant sind.


4
2017-07-31 05:33