Question

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

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

Answer 1

您可以直接查看CSS grammar。

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

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

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

以连字符或下划线开头的标识符通常保留用于特定于浏览器的扩展名，如-?[_a-zA-Z]+[_a-zA-Z0-9-]*中所示。

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

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

Answer 2

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

CSS中的CSS类名允许除NUL之外的任何字符。（如果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）。完成。

Answer 3

阅读W3C spec。（这是CSS 2.1，找到适合您的浏览器假设的版本）

编辑：相关段落如下：

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

编辑2：正如@mipadi在Triptych的回答中指出的那样，这是caveat，也在同一个网页中：

在CSS中，标识符可以以“ - ”开头（短划线）或'_'（下划线）。关键词以' - '开头的属性名称或'_'保留特定于供应商的扩展。这样特定于供应商的扩展应具有以下格式之一：
'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name
实施例（一个或多个）：

例如，如果添加了XYZ组织   用于描述颜色的属性   东边的边界   显示，他们可能会称之为   -xyz边界 - 东 - 色

其他已知的例子：
 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey
初始短划线或下划线是   保证永远不会被用在   任何当前或任何属性或关键字   未来的CSS水平。因此典型的CSS   实现可能无法识别这样的   属性，可能会忽略它们   根据处理规则   解析错误。但是，因为   初始破折号或下划线是其中的一部分   语法，CSS 2.1实现者   应始终能够使用   符合CSS的解析器，无论是否   他们支持任何特定于供应商   扩展。

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

Answer 4

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

Answer 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对其进行编码。

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

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

<强>来源：

https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
Is there a workaround to make CSS classes with names that start with numbers valid?

Answer 7

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

Answer 8

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

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

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

上面链接的文章说从不使用它们，然后给出一个不支持它们的浏览器列表，所有这些浏览器至少是冗余的用户数。

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

Answer 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 : '';

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

10 个答案: