哪些字符在 css 类名选择器中是合法的？

在CSS中，类名选择器是由一个点（.）后跟类名来定义的。类名可以包含以下字符：

1. 字母（a-z，A-Z）。
2. 数字（0-9），但不能作为第一个字符。
3. 下划线（_）。
4. 破折号（-），但不能作为第一个字符，除非后面有其他合法字符。
5. ASCII字符：在某些情况下，可以使用转义序列。
6. Unicode字符：可以使用转义序列，允许几乎所有的字符，包括非ASCII字符。

CSS类名的第一个字符不能是数字、破折号，或者更具体地说，不能是任何可以构成数字的字符，包括加号、减号、小数点、或者数字本身。但是，可以通过转义序列在类名中使用这些字符。

CSS类名也必须遵守以下规则：

• 不能包含空格。
• 不能包含任何不被允许的特殊字符，如 ! @ # $ % ^ & * ( ) = + [ ] { } | ; : " ' < > , / ? 等。
• 不能以破折号 - 开头，如果后面没有至少一个更多的字符，因为这会与CSS的“否定”伪类选择器混淆。

例如，以下是一些合法的CSS类名：

css
/* 合法的类名 */
.my-class {}
.class_name {}
.class-name {}
.class3name {}
.u8 {}
.\31stElement {} /* 使用转义序列允许数字开头 */

以下是一些不合法的CSS类名，因为它们违反了上述规则：

css
/* 不合法的类名 */
.3rd-class {} /* 数字开头 */
.-class-name {} /* 用破折号开头，没有紧跟其他字符 */
.my class {} /* 包含空格 */
.$dollar {} /* 包含特殊字符 */

在实践中，开发者通常会选择意义清晰且易于理解的类名，以便维护CSS代码的可读性和可管理性。

你可以直接查看CSS语法。

_基本上_1，名称必须以下划线 ( _)、连字符 ( -) 或字母 ( a– z) 开头，后跟任意数量的连字符、下划线、字母或数字。有一个问题：如果第一个字符是连字符，则第二个字符必须是字母或下划线，并且名称的长度必须至少为 2 个字符。

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

简而言之，前面的规则转换为以下内容，摘自W3C 规范：

在 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）是无效的。不过，我很确定我在实践中见过这种情况。

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

CSS 中的 CSS 类名称中允许使用除 NUL 之外的任何字符。（如果 CSS 包含 NUL（转义与否），则结果未定义。[ CSS 字符]）但_在 HTML 中_，也不允许永久未分配的代码点。 HTML 也没有办法在类名属性中包含空格字符（空格、制表符、换行符、换页符和回车符），因为这些是类_列表_，并且此处使用空格来将类名彼此分隔开。

Mathias Bynens 的答案链接到解释和演示，展示如何使用这些名称。用CSS代码_写下_，类名_可能需要转义_，但这不会改变类名。例如，不必要的过度转义表示看起来与该名称的其他表示不同，但它仍然引用相同的类名称。

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

因此，如果您需要将随机字符串转换为 CSS 类名：请注意 NUL 和空格，并转义（相应地适用于 CSS 或 HTML）。完毕。

_我已经在CSS 字符转义序列_中深入回答了您的问题。这篇文章还解释了如何转义 CSS（和 JavaScript）中的任何字符，我也为此制作了一个方便的工具。从该页面：

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

CSS：

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

JavaScript：

shell
<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”。

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

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

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

例子）：

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

其他已知的例子：

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

保证任何当前或未来级别的 CSS 都不会在属性或关键字中使用开头的破折号或下划线。因此，典型的 CSS 实现可能无法识别此类属性，并且可能根据处理解析错误的规则忽略它们。然而，由于开头的破折号或下划线是语法的一部分，CSS 2.1 实现者应该始终能够使用符合 CSS 的解析器，无论他们是否支持任何特定于供应商的扩展。

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

完整的正则表达式是：

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