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

Question

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

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

score 1089 · Accepted Answer

可以直接查看CSS 语法。

基本上¹，名称必须以下划线 ( _)、连字符 ( -) 或字母 ( a–<code>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，是无效的。但是，我很确定我已经在实践中看到了这一点。

score 201 · Accepted Answer

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

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

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

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

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

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

score 82 · Accepted Answer

我在这里深入回答了你的问题：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>

score 71 · Accepted Answer

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

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

score 27 · Accepted Answer

完整的正则表达式为：

-?(?:[_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])*

因此，如果直接使用，则不允许使用除“<code>-”和“<code>_”之外的所有列出的字符。foo\~bar但是您可以使用反斜杠或使用 unicode 表示法对它们进行编码foo\7E bar。

score 14 · Accepted Answer

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

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

资料来源：

score 5 · Accepted Answer

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

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

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

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

score 4 · Accepted Answer

4

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

于 2009-10-12T14:04:04.020 回答

score 3 · Accepted Answer

我们可以使用所有字符作为类名。即使喜欢#和.Just 我们也必须用\.

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

<div class="">

</div>

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

11 回答 11

Related

Reference