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

小开

最佳答案

您可以直接查看css语法。

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

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

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

²请注意，根据我链接的语法，以两个连字符开头的规则，例如--indent1，是无效的。然而，我很确定我在实践中见过这种情况。

小开

阅读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
示例（s）：

例如，如果XYZ组织添加了一个属性来描述颜色在边境的东侧显示，他们可能会称之为-xyz-边界-东方-颜色。

其他已知的例子：
 -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对它们进行编码。

小开

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

小开

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

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

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

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

小开

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

这篇文章还解释了如何转义CSS（和JavaScript）中的任何字符，我也为此制作了一个方便的工具。从那一页：

如果你要给一个元素一个ID值~!@$%^&*()_+-=,./';:"?><[]{}|`#，选择器看起来像这样：

css：

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

JavaScript：

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

小开

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

除NUL之外的任何字符都可以在CSS中的CSS类名中使用。（如果CSS包含NUL（转义与否），则结果未定义。[CSS字符]）

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

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

请注意，在超文本标记语言中，无法在类名属性中包含空格字符（空格、制表符、换行、换页和回车），因为它们已经将类彼此分开。

因此，如果您需要将随机字符串转换为CSS类名：照顾NUL和空格，然后转义（相应地用于CSS或超文本标记语言）。完成。

小开

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

.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);}

来源：

小开

从@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 longreturn 2 <= strlen($class) ? $class : '';

小开

我们可以使用所有字符作为类名。即使像#和.一样，我们也必须用\来转义它。

.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>

小开

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

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

<style>.😭{border: 2px solid blue;width: 100px;height: 100px;overflow: hidden;}</style>
<div class="😭">😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅</div>