哪些字符在CSS类名/select器中有效？
CSS类select器中允许使用哪些字符/符号？ 我知道以下字符是无效的 ，但是什么字符是有效的 ？
~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` # 你可以直接检查CSS语法 。
基本上 1 ，名称必须以下划线（ _ ），连字符（ - ）或字母（ a – z ）开头，后跟任意数量的连字符，下划线，字母或数字。 有一个问题：如果第一个字符是连字符，则第二个字符必须是字母或下划线，并且该名称的长度至less为2个字符。
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
以连字符或下划线开头的标识符通常保留用于特定于浏览器的扩展名，如-moz-opacity 。
1由于包含了逃脱的Unicode字符（没有人真正使用），所有这一切都变得更加复杂了。
2请注意，根据我链接的语法，以两个连字符（例如--indent1开头的规则无效。 不过，我很确定我在练习中已经看到了这一点。
令我吃惊的是，这里的答案是错的 事实certificate：
除了NUL之外的任何字符都允许在CSS中的CSS类名中。 （如果CSS包含NUL（转义或不转义），结果是未定义的。[ CSS-characters ]）
Mathias Bynens的答案链接到说明和演示，展示如何使用这些名称。 在CSS代码中写下来 ，类名可能需要转义 ，但不会改变类名。 例如，一个不必要的过度转义的表示看起来与该名称的其他表示不同，但它仍然指向相同的类名称。
大多数其他（编程）语言不具有转义variables名称（“标识符”）的概念，因此variables的所有表示必须看起来相同。 CSS中不是这种情况。
请注意，在HTML中，没有办法在类名称属性中包含空格字符（空格，制表符，换行符，换页符和回车符） ，因为它们已经将类彼此分开了。
所以，如果你需要把一个随机的string变成一个CSS类的名字：注意NUL和空格，并转义（相应的CSS或HTML）。 完成。
阅读W3C规范 。 （这是CSS 2.1，find适合您的浏览器的版本）
编辑：相关段落如下：
在CSS中，标识符（包括元素名称，类和select器中的ID）只能包含字符[a-z0-9]和ISO 10646字符U + 00A1及更高版本，连字符（ – ）和下划线（_） ; 他们不能以数字或连字符后跟数字开始。 标识符也可以包含转义字符和任何ISO 10646字符作为数字代码（参见下一项）。 例如，标识符“B＆W？” 可以写成“B \ W \”。 或“B \ 26 W \ 3F”。
编辑2：正如@mipadi指出的三联的答案，这是警告 ，也在同一个网页：
在CSS中，标识符可以以' – '（破折号）或'_'（下划线）开头。 以“ – ”或“_”开头的关键字和属性名称保留用于特定于供应商的扩展。 这种特定于供应商的扩展应具有以下格式之一：
'-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name例子）：
例如，如果XYZ组织添加了一个属性来描述显示器东侧边框的颜色，则可以将其称为-xyz-border-east-color。
其他已知的例子：
-moz-box-sizing -moz-border-radius -wap-accesskey保证初始短划线或下划线不会被任何当前或未来的CSS级别用于属性或关键字。 因此，典型的CSS实现可能无法识别这些属性，并可能根据处理parsing错误的规则忽略它们。 但是，由于最初的破折号或下划线是语法的一部分，所以CSS 2.1实现者应该始终能够使用符合CSS的parsing器，无论它们是否支持特定于供应商的扩展。
作者应避免特定于供应商的扩展
我已经在这里深入地回答了你的问题： http : //mathiasbynens.be/notes/css-escapes
文章还解释了如何逃避CSS（和JavaScript）中的任何字符，并且我为此也做了一个方便的工具 。 从该页面：
如果你给一个元素的ID值为
~!@$%^&*()_+-=,./';:"?><[]{}|`#，那么select器将如下所示：CSS：
<style> #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\# { background: hotpink; } </style>JavaScript的：
<script> // document.getElementById or similar document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#'); // document.querySelector or similar $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#'); </script>
完整的正则expression式是：
-?(?:[_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 notation foo\7E bar来对它们进行编码。
对于HTML5 / CSS3类和ID可以以数字开头。
对于那些正在寻找解决方法的人，您可以使用属性select器，例如，如果您的课程以数字开头。 更改：
.000000-8{background:url(../..http://img.dovov.comcommon/000000-0.8.png);} /* DOESN'T WORK!! */
对此：
[class="000000-8"]{background:url(../..http://img.dovov.comcommon/000000-0.8.png);} /* WORKS :) */
另外，如果有多个类，您需要在select器中指定它们。
资料来源：
- https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
- 是否有一个解决方法，使CSS名称以数字开头有效的类？
我的理解是，下划线在技术上是有效的。 查看：
https://developer.mozilla.org/en/underscores_in_class_and_id_names
“……对2001年初发布的规范的勘误首次强调了合法性。”
上面链接的文章说，从来没有使用它们，然后给出一个不支持它们的浏览器列表，至less在用户数方面，它们都是冗余的。
