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

Question

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

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

Answer 1

您可以直接检查CSS语法.

基本上¹,名称必须以下划线(_),连字符(-)或字母(a- z)开头,后跟任意数量的连字符,下划线,字母或数字.有一个问题:如果第一个字符是连字符,则第二个字符必须是²个字母或下划线,并且名称长度必须至少为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.

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

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

Answer 2

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

CSS中的CSS类名允许除NUL之外的任何字符.(如果CSS包含NUL(转义或不转义),则结果未定义.[ CSS-characters ])

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

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

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

因此,如果您需要将随机字符串转换为CSS类名称:处理NUL和空间,并转义(相应地为CSS或HTML).完成.

Answer 3

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

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

Answer 4

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

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

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

资料来源:

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

Answer 7

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

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

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

<div class="">
  
</div>

Answer 8

对于HTML5/CSS3类,ID可以从数字开始.

Answer 9

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

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

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

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

Answer 10

我们可以在类名中使用所有字符。#甚至像和 之类的字符.。我们只需要使用\（反斜杠）来转义它们。

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