是否有一种解决方法可以使名称以数字开头的 CSS 类有效？ [复制]

Posted 2023-03-06

【中文标题】是否有一种解决方法可以使名称以数字开头的 CSS 类有效？ [复制]

【英文标题】：Is there a workaround to make CSS classes with names that start with numbers valid? [duplicate]

【发布时间】：2014-02-09 06:01:28

【问题描述】：

是否在任何名称以数字开头的 CSS 类不起作用的地方引用它？ 例如，我发现一个具有如下背景的类：

.000000-8 background:url(../../images/common/000000-0.8.png);
.8FFFFFF background:url(../../images/common/FFFFFF-0.8.png);

在我拥有的大多数浏览器中都不起作用，CSS grammar 显示了这一点，但我的问题是有一个 解决方法 可以使名称以数字开头的 CSS 类有效吗？ .

【问题讨论】：

这个问题已经回答css naming rule

w3.org/TR/CSS21/grammar.html#scanner

我已经搜索了表明选择器第一个字符/开头的问题，但没有找到任何.. 现在我得到了一个回答这个问题的问题。

这个问题绝不是重复的。提到的答案没有具体回答数字问题。

【参考方案1】：

没有 CSS 类。这个问题在逻辑上分为两个问题：你能否在 HTML 中以数字开头一个类名，以及（假设答案是“是”，因为它确实如此）如果是，你如何在 CSS 中使用相应的类选择器？

各种 HTML 规范对类名施加了各种限制，但在浏览器实践中，根据 HTML5，没有限制，除了类名不能包含空白字符。所以class=000000-8 是有效的。

根据 CSS 语法规则，CSS 标识符不能带有 未转义 数字。因此，.000000-8 这样的选择器是无效的。但是数字可以被CSS escaping rules转义：选择器

.\30 00000-8

或者，等价的，

.\00003000000-8 

有效且匹配class=000000-8的元素。

不用说，最好避免以数字开头的类名，但如果您必须使用它们（例如，因为某些 HTML 文档有它们并且您无法更改标记），这就是方法。

【讨论】：

是的，你是对的，虽然它与浏览器无关，但我测试并发现这两个选择器都适用于我的浏览器，包括 Windows 版 Safari、IE、IE7 和兼容性视图。还在智能手机默认浏览器和 iPad Air 上进行了测试。

想知道如何转义 CSS 中的任何字符？ There's a web app for that.

【参考方案2】：

是的，它记录在CSS specification：

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