Question

我注意到如果id或class从number开始，则不应用css属性。例如，以下都不起作用：

.1ww{
    /* some properties here */
}

和

.1{
    /* some properties here */
}

和

#1{
    /* some properties here */
}

和

#1ww{
    /* some properties here */
}

为什么CSS不支持ID或类名，从数字开始？（例如，Javascript适用于数字ID和类）

Answer 1

ID和类必须是有效的标识符。

标识符在specification中列出如下：

ident       -?{nmstart}{nmchar}*

一个可选的-符号，后跟nmstart，后跟任意数量的nmchar。

我们感兴趣的是nmstart，但我还会列出nmchar：

nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}

只是为了完整性：

nonascii    [\240-\377]
escape      {unicode}|\\[^\r\n\f0-9a-f]
unicode     \\{h}{1,6}(\r\n|[ \t\r\n\f])?

好的，所以尽管如此，会注意nmstart 不包括0-9或- 的方式。这意味着ID和类不能根据CSS规范以数字开头。事实上，他们甚至不能从-1开始。或两个连字符。

这就是您的代码无法识别它们的原因。

Answer 2

实际上，规范声明以数字开头的类将被解释为维度[1]：

CSS2会立即解析一个数字，后面跟一个标识符作为DIMENSION标记（即一个未知单位），CSS1将其解析为数字和标识符。这意味着在CSS1中，声明＆＃39;字体：10pt / 1.2serif＆＃39;是正确的，字体是：10pt / 12pt serif＆＃39 ;;在CSS2中，在＆＃34; serif＆＃34;之前需要一个空格。（有些UA接受了第一个例子，但没有接受第二个例子。）

由于我们不知道将来会引入哪些维度，因此CSS中不存在的维度会被解析为未知维度：

在CSS1中，类名可以以数字开头（＆＃34; .55ft＆＃34;），除非它是一个维度（＆＃34; .55in＆＃34;）。在CSS2中，此类被解析为未知维度（以允许将来添加新单位）。制作＆＃34; .55ft＆＃34;一个有效的类，CSS2需要转义第一个数字（＆＃34;。\ 35 5ft＆＃34;）

您可以通过转义第一个数字来使用以数字开头的类，该数字根据W3C CSS验证器有效。查看plunkr。

[1]附录G. CSS 2.1的语法

Answer 3

虽然使用数字启动Id和类名称不是一个好习惯，但您可以通过使用以下语法从css中访问这些元素

[class="1ww"] 
{
    /* some properties here */
}

或

[id="1"]
{
    /* some properties here */
}

Answer 4

这是CSS的规则。 Here is the link

在CSS中，标识符（包括选择器中的元素名称，类和ID）可以仅包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高，加上连字符（ - ）和下划线（_）; 他们不能以数字开头，两个连字符，或连字符后跟数字。

Answer 5

根据HTML5.1 Nightly from 5 October 2014，他们同意ID没有理由不能以数字开头：

注意：对于ID可以采取的形式没有其他限制;在特别是，ID可以只包含数字，以数字开头，开始带下划线，仅包括标点符号等。

如果您必须在ID的开头使用数字，则可以（如the other answers中所述）使用属性选择器或you could escape the number。

#\31 ww
{
  background: red;
}

Answer 6

Working Fiddle

你可以用CSS实现它，但不同

<强> HTML

<div id="1">Some Id with Number</div>

<强> CSS

[id='1']
{
    font-size: 60px;
    color: red;
}

<强>但是

#1 /*Not gonna work*/
{
    font-size: 60px;
    color: red;
}

类似于Class;

<强> Working Fiddle

<强> CSS

[class="1"]
{
    font-size: 100px;
    color: red;
}

从数字开始，CSS是否有理由不支持ID和类？
其中一个主要原因是;它没有语义含义。 e.g。

<div id="1" class="2"></div> /*has no semantic meanings*/

可以修复为;

<div id="header" class="top-spacing"></div>

<强> Reference

Answer 7

抄袭我很久以前在这里读过的类似问题的答案：它的惯例是从其他较旧的语言转移而来的。

过去，FORTRAN和BASIC等语言不需要使用空格，如下所示：

10 A1 = 10

与此相同：

10A1=10

问题是，这样的事情很难理解：

111A=10

因为它可以解释为：

11 1A = 10

或：

111 A = 10

等

结果，带有数字的起始变量被认为是非法的。这是一个持久的惯例，现在仍然存在于大多数语言中，包括CSS。

编辑：found the question

Answer 8

我认为没有CSS具体原因。这是编程语言的旧标准。如果第一个字符可以确定整个令牌是数字或标识符（一个前面带有数字字符的标记必须是数字文字），则语言标记符可以更快/更简单。

var x = 10e4; // is this a variable?

有没有理由说CSS从数字开始不支持id和类？

8 个答案: