完整的正则表达式为:

-?(?:[_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来编码它们。

我已经在CSS字符转义序列中深入回答了你的问题。本文还解释了如何在CSS(和JavaScript)中转义任何字符，我还为此制作了一个方便的工具。从那一页开始:

如果你给一个元素的ID值 ~!@$%^&*()_+-=,./';:"?><[]{}| ' #，选择器看起来像这样: CSS: <时尚> #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\# ｛ 背景:hotpink; ｝ > < /风格 JavaScript: < >脚本 / /文档。getElementById或类似的 . getelementbyid ('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#'); / /文档。querySelector或类似的 $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#'); > < /脚本

令我惊讶的是，这里的大多数答案都是错误的。事实证明:

CSS类名中除了NUL之外的任何字符都是允许的。(如果CSS包含NUL(转义与否)，结果是未定义的。[CSS-characters])

Mathias Bynens的回答链接到如何使用这些名字的解释和演示。在CSS代码中，类名可能需要转义，但这不会改变类名。例如，一个不必要的超转义表示将看起来与该名称的其他表示不同，但它仍然引用相同的类名。

大多数其他(编程)语言没有转义变量名(“标识符”)的概念，因此变量的所有表示必须看起来相同。在CSS中不是这样的。

注意，在HTML中，没有办法在类名属性中包含空格字符(空格、制表符、换行符、换行符和回车符)，因为它们已经将类彼此分开了。

因此，如果你需要将一个随机字符串转换为CSS类名:注意NUL和空格，并转义(适用于CSS或HTML)。完成了。

我的理解是，下划线在技术上是有效的。查看:

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

“…2001年初发布的规范勘误表首次使下划线合法。”

上面链接的文章说永远不要使用它们，然后给出了一个不支持它们的浏览器列表，至少就用户数量而言，所有这些浏览器都是长冗余的。

对于HTML5和css3，类和id可以以数字开头。

完整的正则表达式为:

-?(?:[_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来编码它们。