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

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

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

当前回答

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

.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

其他回答

我已经在CSS字符转义序列中深入回答了你的问题。本文还解释了如何在CSS(和JavaScript)中转义任何字符,我还为此制作了一个方便的工具。从那一页开始:

如果你给一个元素的ID值 ~!@$%^&*()_+-=,./';:"?><[]{}| ' #,选择器看起来像这样: CSS: <时尚> #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\# { 背景:hotpink; } > < /风格 JavaScript: < >脚本 / /文档。getElementById或类似的 . getelementbyid ('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#'); / /文档。querySelector或类似的 $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#'); > < /脚本

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

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 >

对于HTML5和css3,类和id可以以数字开头。

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

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

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

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

你可以直接检查CSS语法。

基本上,名称必须以下划线(_)、连字符(-)或字母(a - z)开头,后面跟着任意数量的连字符、下划线、字母或数字。这里有一个问题:如果第一个字符是连字符,第二个字符必须是字母或下划线,并且名称必须至少有两个字符长。

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

简而言之,前面的规则转换为以下内容,摘自W3C规范:

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

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

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

注意,根据我链接的语法,以两个连字符开头的规则,例如——indent1,是无效的。然而,我很确定我在实践中见过这种情况。