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

CSS类选择器中允许使用哪些字符/符号？
我知道以下字符无效，但是哪些字符有效？

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

您可以直接在CSS语法中进行检查。

基本上，¹，名称必须以下划线（_），连字符（-）或字母（a– z）开头，后跟任意数量的连字符，下划线，字母或数字。有一个陷阱：如果第一个字符是连字符，第二个字符必须²是字母或下划线，并且名称必须至少2个字符长。

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

简而言之，从W3C规范中提取的先前规则转化为以下规则。：

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

以连字符或下划线开头的标识符通常保留给特定于浏览器的扩展名，如中所述-moz-opacity。

¹由于包含转义的unicode字符（没有人真正使用过），这一切都变得更加复杂。

²请注意，根据我链接的语法，以两个连字符（例如）开头的规则--indent1无效。但是，我很确定我已经在实践中看到了这一点。

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

CSS中的CSS类名称中允许使用除NUL之外的任何字符。（如果CSS包含NUL（是否转义了），则结果是不确定的。[ CSS字符 ]）

Mathias Bynens的答案链接到说明和演示，演示了如何使用这些名称。写下来的CSS代码，类名可能需要逃避，但这并不改变类名。例如，不必要的过度转义的表示形式看起来将不同于该名称的其他表示形式，但它仍引用相同的类名称。

大多数其他（编程）语言都没有转义变量名称（“标识符”）的概念，因此变量的所有表示形式都必须看起来相同。CSS中不是这种情况。

请注意，在HTML中，无法在类名称属性中包含空格字符（空格，制表符，换行符，换页符和回车符），因为它们已经将各个类彼此分开。

因此，如果需要将随机字符串转换为CSS类名称：请注意NUL和空格，然后转义（对于CSS或HTML而言）。做完了

我已经在这里深入回答了您的问题：http : //mathiasbynens.be/notes/css-escapes

本文还介绍了如何在CSS（和JavaScript）中转义任何字符，为此我也做了一个方便的工具。从该页面：

如果要给元素ID值为~!@$%^&*()_+-=,./';:"?><[]{}|`#，则选择器将如下所示：

CSS：

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript：

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>

阅读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的解析器，无论它们是否支持任何特定于供应商的扩展。

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

完整的正则表达式为：

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

对于那些寻求解决方法的用户，例如，如果您的课程以数字开头，则可以使用属性选择器。更改：

.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 :) */

另外，如果有多个类，则需要在我认为的选择器中指定它们。

资料来源：

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. 是否有一种解决方法可以使以数字开头的名称的CSS类有效？

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

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

“ ... 2001年初发布的规范的勘误表首次强调了合法性。”

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

对于HTML5 / CSS3，类和ID可以以数字开头。

通过@Triptych的答案，您可以使用以下2个正则表达式匹配项来使字符串有效：

[^a-z0-9A-Z_-]

这是一个反向匹配，选择的内容不是字母，数字，破折号或下划线，以便于删除。

^-*[0-9]+

这匹配0或1破折号，后跟字符串开头的1个或多个数字，也很容易删除。

我如何在PHP中使用它：

//Make alphanumeric with dashes and underscores (removes all other characters)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);
//Classes only begin with an underscore or letter
$class = preg_replace("/^-*[0-9]+/", "", $class);
//Make sure the string is 2 or more characters long
return 2 <= strlen($class) ? $class : '';