在CSS类选择器中允许使用哪些字符/符号?

我知道下面的字符是无效的,但是哪些字符是有效的呢?

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

当前回答

阅读W3C规范(这是CSS 2.1;为您的浏览器假设找到合适的版本)

相关的段落:

在CSS中,标识符(包括 中的元素名称、类和id 选择器)只能包含 字符[a-z0-9]和iso10646 字符U+00A1及以上,加上 连字符(-)和下划线(_); 不能以数字或字母开头 连字符后面跟着一个数字。 标识符也可以包含转义 字符及任何iso10646字符 作为数字代码(见下一项)。为 实例中,标识符“B&W?”可以为 写成“B&W?”或“B\ 26w \3F”。

正如@mipadi在Kenan Banks的回答中指出的那样,在同一个网页上也有这样的警告:

在CSS中,标识符可以以“-”开头 (破折号)或“_”(下划线)。关键字 以及以" - "开头的属性名 或者'_'被保留 特定于供应商的扩展。这样的 特定于供应商的扩展应该具有 以下格式之一: '-' +供应商标识符+ '-' +有意义的名称 '_' +供应商标识符+ '-' +有意义的名称 示例(s): 例如,如果添加了XYZ组织 属性来描述的颜色 边境的东部 他们可能称之为“展示” -xyz-border-east-color。 其他已知的例子: -moz-box-sizing -moz-border-radius -wap-accesskey 开头的破折号或下划线是 保证永远不会被用在 属性或关键字由任何当前或 未来的CSS级别。这就是典型的CSS 实现可能无法识别这种情况 属性,并可能忽略它们 按规定办理 解析错误。然而,因为 开头的破折号或下划线是 语法,css2.1实现者 应该总是能使用一个 符合css的解析器,无论是否如此 它们支持任何特定于供应商的产品 扩展。 作者应该避免特定于供应商 扩展

其他回答

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

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

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

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

完整的正则表达式为:

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

此外,如果有多个类,你需要在选择器中指定它们或使用~=操作符:

[class~="000000-8"]{background:url(../../images/common/000000-0.8.png);}

来源:

https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/ 是否有一种变通方法使名称以数字开头的CSS类有效? https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

阅读W3C规范(这是CSS 2.1;为您的浏览器假设找到合适的版本)

相关的段落:

在CSS中,标识符(包括 中的元素名称、类和id 选择器)只能包含 字符[a-z0-9]和iso10646 字符U+00A1及以上,加上 连字符(-)和下划线(_); 不能以数字或字母开头 连字符后面跟着一个数字。 标识符也可以包含转义 字符及任何iso10646字符 作为数字代码(见下一项)。为 实例中,标识符“B&W?”可以为 写成“B&W?”或“B\ 26w \3F”。

正如@mipadi在Kenan Banks的回答中指出的那样,在同一个网页上也有这样的警告:

在CSS中,标识符可以以“-”开头 (破折号)或“_”(下划线)。关键字 以及以" - "开头的属性名 或者'_'被保留 特定于供应商的扩展。这样的 特定于供应商的扩展应该具有 以下格式之一: '-' +供应商标识符+ '-' +有意义的名称 '_' +供应商标识符+ '-' +有意义的名称 示例(s): 例如,如果添加了XYZ组织 属性来描述的颜色 边境的东部 他们可能称之为“展示” -xyz-border-east-color。 其他已知的例子: -moz-box-sizing -moz-border-radius -wap-accesskey 开头的破折号或下划线是 保证永远不会被用在 属性或关键字由任何当前或 未来的CSS级别。这就是典型的CSS 实现可能无法识别这种情况 属性,并可能忽略它们 按规定办理 解析错误。然而,因为 开头的破折号或下划线是 语法,css2.1实现者 应该总是能使用一个 符合css的解析器,无论是否如此 它们支持任何特定于供应商的产品 扩展。 作者应该避免特定于供应商 扩展

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

test \。123年{ 颜色:红色; } test \ # 123 { 颜色:蓝色; } test \ @123 { 颜色:绿色; } test \ < 123 { 颜色:棕色; } test \ ' 123 { 颜色:紫色; } test \ ~ 123 { 颜色:番茄; } < div class = " test.123”> test.123 < / div > < div class = "测试# 123 " >测试# 123 < / div > < div class = " test@123”> test@123 < / div > < div class = "测试< 123”测试< 123 > < / div > < div class = " 123 " >测试测试的123 < / div > 测试~ < div class = " 123 " >测试~ 123 < / div >