哪些字符在 CSS 类名/选择器中有效？答案

【问题标题】：Which characters are valid in CSS class names/selectors?哪些字符在 CSS 类名/选择器中有效？
【发布时间】：2010-10-01 17:30:11
【问题描述】：

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

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

【问题讨论】：

相关问题：stackoverflow.com/questions/2812072/…
utf8 字符呢？就像我可以输入希腊语一样
可以通过转义特殊字符在类名中使用它们 - 在您的 CSS 文件中，您可以通过转义反斜杠来定义 .hello/world 类：.hello\2fworld、hello\2f world 或 hello\/world跨度>
另一个相关问题，不是关于“名称的语法”，而是关于expressing multiple names时的“类属性的语法”。
您也可以使用表情符号。 npmjs.com/package/postcss-modules-emoji-classname

标签： css css-selectors

【解决方案1】：

您可以直接在CSS grammar查看。

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

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

简而言之，前面的规则转换为以下，从W3C spec. 中提取：

在 CSS 中，标识符（包括元素名称、类和 ID）选择器）只能包含字符 [a-z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_);它们不能以数字或连字符后跟数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（见下一项）。例如，标识符“黑白？”可以写成“B&W？”或“B\26 W\3F”。

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

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

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

【讨论】：

注意：W3C 表示，前导“-”或“_”的使用应保留给特定于供应商的 CSS 扩展（例如，Mozilla 浏览器实现的 -moz* 类）。跨度>
我添加了不以 _ 开头的示例 - 或字母但表情符号。我不建议对类进行这样的命名，但它确实有效。很高兴知道一般的好奇心。 stackoverflow.com/a/69963534/1737158

【解决方案2】：

令我惊讶的是，这里的大多数答案都是错误的。原来：

除 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）。完成。

【讨论】：

【解决方案3】：

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

这篇文章还解释了如何在 CSS（和 JavaScript）中转义任何字符，我也为此创建了 a handy tool。从该页面：

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

CSS：

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

JavaScript：

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

【讨论】：

【解决方案4】：

阅读W3C spec。（这是 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 的回答中指出的那样，caveat 也在同一个网页中：

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

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

【讨论】：

【解决方案5】：

完整的正则表达式为：

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

【讨论】：

【解决方案6】：

对于那些寻找解决方法的人，您可以使用属性选择器，例如，如果您的类以数字开头。变化：

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

另外，如果有多个类，您需要在选择器中指定它们或使用~= 运算符：

[class~="000000-8"]{background:url(../../images/common/000000-0.8.png);}

来源：

【讨论】：

【解决方案7】：

我的理解是下划线在技术上是有效的。签出：

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

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

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

【讨论】：

【解决方案8】：

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

【讨论】：

但是 css 选择器仍然需要通过 unicode 代码点进行转义。例如：10 类的 CSS 选择器必须是 .\31 0

【解决方案9】：

我们可以使用所有字符作为类名。甚至像# 和. 一样，我们必须用\ 来逃避它。

.test\.123 {
  color: red;
}

.test\#123 {
  color: blue;
}

.test\@123 {
  color: green;
}

.test\<123 {
  color: brown;
}

.test\`123 {
  color: purple;
}

.test\~123 {
  color: tomato;
}

<div class="test.123">test.123</div>
<div class="test#123">test#123</div>
<div class="test@123">test@123</div>
<div class="test<123">test<123</div>
<div class="test`123">test`123</div>
<div class="test~123">test~123</div>

【讨论】：

【解决方案10】：

离开@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 : '';

【讨论】：

【解决方案11】：

我不建议使用除 A-z、_- 和 0-9 之外的任何东西，但使用这些符号更容易编码。也不要以- 开始类，而这些类通常是特定于浏览器的标志。为了避免 IDE 自动完成的任何问题，当您出于某种原因可能需要使用其他代码生成这些类名时，复杂性会降低。也许某些转译软件可能不起作用等等等等。

然而，CSS 在这方面相当松散。您可以使用任何符号，甚至表情符号也可以。

<style>
.?{
  border: 2px solid blue;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
</style>

<div class="?">
????????????????????
</div>

【讨论】：