在CSS类选择器中允许使用哪些字符/符号?
我知道下面的字符是无效的，但是哪些字符是有效的呢?
~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
当前回答
令我惊讶的是，这里的大多数答案都是错误的。事实证明:
CSS类名中除了NUL之外的任何字符都是允许的。(如果CSS包含NUL(转义与否)，结果是未定义的。[CSS-characters])
Mathias Bynens的回答链接到如何使用这些名字的解释和演示。在CSS代码中，类名可能需要转义，但这不会改变类名。例如，一个不必要的超转义表示将看起来与该名称的其他表示不同，但它仍然引用相同的类名。
大多数其他(编程)语言没有转义变量名(“标识符”)的概念，因此变量的所有表示必须看起来相同。在CSS中不是这样的。
注意，在HTML中，没有办法在类名属性中包含空格字符(空格、制表符、换行符、换行符和回车符)，因为它们已经将类彼此分开了。
因此，如果你需要将一个随机字符串转换为CSS类名:注意NUL和空格，并转义(适用于CSS或HTML)。完成了。
其他回答
完整的正则表达式为:
-?(?:[_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])*
所以你列出的所有字符，除了“-”和“_”，如果直接使用是不允许的。但是您可以使用反斜杠foo\~bar或使用Unicode符号foo\7E bar来编码它们。
对于HTML5和css3，类和id可以以数字开头。
对于那些寻找解决方法的人，您可以使用属性选择器，例如，如果您的类以数字开头。变化:
.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */
:
[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */
此外，如果有多个类，你需要在选择器中指定它们或使用~=操作符:
[class~="000000-8"]{background:url(../../images/common/000000-0.8.png);}
来源:
https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/ 是否有一种变通方法使名称以数字开头的CSS类有效? https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
令我惊讶的是，这里的大多数答案都是错误的。事实证明:
CSS类名中除了NUL之外的任何字符都是允许的。(如果CSS包含NUL(转义与否)，结果是未定义的。[CSS-characters])
Mathias Bynens的回答链接到如何使用这些名字的解释和演示。在CSS代码中，类名可能需要转义，但这不会改变类名。例如，一个不必要的超转义表示将看起来与该名称的其他表示不同，但它仍然引用相同的类名。
大多数其他(编程)语言没有转义变量名(“标识符”)的概念，因此变量的所有表示必须看起来相同。在CSS中不是这样的。
注意，在HTML中，没有办法在类名属性中包含空格字符(空格、制表符、换行符、换行符和回车符)，因为它们已经将类彼此分开了。
因此，如果你需要将一个随机字符串转换为CSS类名:注意NUL和空格，并转义(适用于CSS或HTML)。完成了。
我们可以在类名中使用所有字符。甚至像#和..我们只需要用\(反斜杠)来转义它们。
test \。123年{ 颜色:红色; ｝ test \ # 123 { 颜色:蓝色; ｝ test \ @123 { 颜色:绿色; ｝ test \ < 123 { 颜色:棕色; ｝ test \ ' 123 { 颜色:紫色; ｝ test \ ~ 123 { 颜色:番茄; ｝ < div class = " test.123”> test.123 < / div > < div class = "测试# 123 " >测试# 123 < / div > < div class = " test@123”> test@123 < / div > < div class = "测试< 123”测试< 123 > < / div > < div class = " 123 " >测试测试的123 < / div > 测试~ < div class = " 123 " >测试~ 123 < / div >
