哪些字符在 CSS 类名/选择器中有效？
CSS 类选择器中允许使用哪些字符/符号？我知道下面的字符是无效的，但是哪些字符是有效的呢？
~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
.hello/world 类：.hello\2fworld、hello\2f world 或 hello\/world
您可以直接在 CSS grammar 处查看。
基本上1，名称必须以下划线 (_)、连字符 (-) 或字母 (a–z) 开头，后跟任意数量的连字符、下划线、字母或数字。有一个问题：如果第一个字符是连字符，则第二个字符必须2 是字母或下划线，并且名称必须至少有 2 个字符长。
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
简而言之，从 W3C spec. 中提取的前面的规则转换为以下内容：
在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_) ;它们不能以数字或连字符后跟数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W？”可以写成“B&W？”或“B\26 W\3F”。
以连字符或下划线开头的标识符通常保留用于特定于浏览器的扩展程序，如 -moz-opacity。
1 由于包含转义的 unicode 字符（没有人真正使用），这一切都变得更加复杂。
2 请注意，根据我链接的语法，以两个连字符开头的规则（例如 --indent1）是无效的。但是，我很确定我已经在实践中看到了这一点。
令我惊讶的是，这里的大多数答案都是错误的。事实证明：
除 NUL 之外的任何字符都可以在 CSS 中的 CSS 类名中使用。（如果 CSS 包含 NUL（是否转义），则结果未定义。[CSS-characters]）
Mathias Bynens' answer 指向 explanation 和 demos 的链接，显示如何使用这些名称。 写在CSS代码中，类名可能需要转义，但这不会改变类名。例如，一个不必要的过度转义表示看起来与该名称的其他表示不同，但它仍然引用相同的类名。
大多数其他（编程）语言没有转义变量名（“标识符”）的概念，因此变量的所有表示必须看起来相同。这不是 CSS 中的情况。
请注意，在 HTML 中，无法将 space characters (space, tab, line feed, form feed and carriage return) 包含在 class name attribute 中，因为它们已经将类彼此分开。
因此，如果您需要将随机字符串转换为 CSS 类名：请注意 NUL 和空格，然后转义（针对 CSS 或 HTML）。完毕。
我已经在这里深入回答了您的问题：http://mathiasbynens.be/notes/css-escapes
这篇文章还解释了如何在 CSS（和 JavaScript）中转义任何字符，我也为此制作了 a handy tool。从该页面：
如果你要给一个元素一个 ID 值 ~!@$%^&*()_+-=,./';:"?><[]{}|`#，选择器看起来像这样： CSS: <样式> #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\ >\<\[\]\\\{\}\|\`\# { 背景：hotpink; } JavaScript:
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
.css规则的选择器中）作为"." + ident，并且ident的词法扫描器规则特别允许在初始 { 之后的类名中0x00-0x7F之外的 任何字符 6} 字符，因此此处发布的[_a-zA-Z0-9-]*模式不正确。