哪些字符在CSS类名/选择器中有效？

Question

哪些字符在CSS类名/选择器中有效？CSS类选择器中允许使用哪些字符/符号？我知道以下字符无效，但哪些字符有效？~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

Answer 1

阅读W3C规范。（这是CSS 2.1，找到适合您的浏览器假设的版本）

编辑：相关段落如下：

在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-z0-9]和ISO 10646字符U + 00A1和更高，加上连字符（ - ）和下划线（_） ; 它们不能以数字开头，也不能以数字后跟连字符开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符“B＆W？” 可以写成“B \＆W \？” 或“B \ 26 W \ 3F”。

编辑2：正如@mipadi在Triptych的回答中指出的那样，有一个警告，也在同一个网页中：

在CSS中，标识符可以以“ - ”（破折号）或“_”（下划线）开头。以“ - ”或“_”开头的关键字和属性名称保留给特定于供应商的扩展。此类特定于供应商的扩展应具有以下格式之一：

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

例子）：

例如，如果XYZ组织添加了一个属性来描述显示器东侧边框的颜色，则可以将其称为-xyz-border-east-color。

其他已知的例子：

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

保证初始破折号或下划线永远不会被任何当前或未来的CSS级别用于属性或关键字。因此，典型的CSS实现可能无法识别这些属性，并且可能根据用于处理解析错误的规则来忽略它们。但是，因为初始短划线或下划线是语法的一部分，所以CSS 2.1实现者应始终能够使用符合CSS的解析器，无论它们是否支持任何特定于供应商的扩展。

作者应避免特定于供应商的扩展

Answer 2

完整的正则表达式是：

-?(?:[_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。