CSS 类名称 / 选择器中哪些字符有效?

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

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

答案

您可以直接在CSS 语法中进行检查。

基本上是 1 ,名称必须以下划线( _ ),连字符( - )或字母( az )开头,后跟任意数量的连字符,下划线,字母或数字。有一个陷阱:如果第一个字符是连字符,第二个字符必须2是字母或下划线,并且名称必须至少 2 个字符长。

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

简而言之,从W3C 规范中提取的先前规则转化为以下规则。

在 CSS 中,标识符(包括选择器中的元素名称,类和 ID)只能包含字符 [a-z0-9] 和 ISO 10646 字符 U + 00A1 及更高版本,以及连字符(-)和下划线(_) ; 它们不能以数字开头,也不能以连字符后接数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码(请参阅下一项)。例如,标识符 “B&W?” 可以写为 “B \&W \?” 或 “B \ 26 W \ 3F”。

以连字符或下划线开头的标识符通常保留给浏览器特定的扩展名,例如-moz-opacity

1由于包含转义的 unicode 字符(没有人真正使用过),这一切都变得更加复杂。

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

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

CSS 中的 CSS 类名称中允许使用除 NUL 之外的任何字符。 (如果 CSS 包含 NUL(是否转义了),则结果是不确定的。[ CSS 字符 ])

Mathias Bynens 的答案链接到说明演示演示了如何使用这些名称。 写下来的 CSS 代码,类名可能需要逃避 ,但这并不改变类名。例如,不必要的过度转义的表示形式看起来将不同于该名称的其他表示形式,但它仍引用相同的类名称。

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

请注意,在 HTML 中,无法在类名称属性中包含空格字符(空格,制表符,换行符,换页符和回车符) ,因为它们已经将各个类彼此分开。

因此,如果需要将随机字符串转换为 CSS 类名称:请注意 NUL 和空格,然后转义(对于 CSS 或 HTML 而言)。做完了

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

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

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

完整的正则表达式为:

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

对于那些寻求解决方法的用户,例如,如果您的课程以数字开头,则可以使用属性选择器。更改:

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

另外,如果有多个类,则需要在我认为的选择器中指定它们。

资料来源:

  1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
  2. 是否有一种解决方法可以使以数字开头的名称的 CSS 类有效?

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

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

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

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

上面链接的文章说,从不使用它们,然后给出了不支持它们的浏览器列表,至少就用户数量而言,所有浏览器都是冗长的。

通过 @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 : '';