Question

当查看另一个关于一个类名的问题时，这个问题的开头是一个没有按预期工作的数字，我突然想到我不知道出了什么问题。

这是一个简单的例子：

.123 {color:blue;}

<div class="123">This is something 123</div>

这不会使输出变为蓝色原因是：.123不是有效的CSS选择器，因为它看起来像一个数字。

是的，但是，为什么？为什么CSS解析器会在选择器中查找数字？选择器是否真的有理由包含数字？任何人都可以提供这样一个选择器的例子吗？

编辑：根据评论，括号和括号内的参数可以是数字;例如nth-child(2)或[colspan=2]，所以我的问题是关于那些之外的数字。

Answer 1

最简单的答案可能是，CSS Selector Spec不允许它和（大多数）浏览器似乎遵守这一点，即使在技术上可能允许使用前导数字（或连字符）：

一个非常简单的解释：一个选择器由一个（可选的）类型选择器组成（例如＃为ids，。为类）a＆＃34; nmstart＆＃34;和可选＆＃34; nmchar＆＃34;部分。＆＃34; nmstart＆＃34;部分不允许数字，而＆＃34; nmchar＆＃34;部分确实：

nmstart [_a-z] | {nonascii} | {escape}

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

Answer 2

正如MattDiMu已经在他们的回答中指出的那样，找出应该如何验证选择器的地方是在CSS选择器规范的第10部分：The grammar of Selectors，它本身就是CSS2.2规范的Grammar部分，省略了几位。

在CSS2.2规范中，我们被告知为什么数字在CSS选择器的开头无效：

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

简而言之，这是为了避免混淆。 .1px是一个有效的单元，很容易被误认为是一个“1px”类，但是如果我们逃避它，我们可以在选择器的开头使用数字。在下面的示例中，我可以通过在类选择器中转义1（div）来定位class为“1px”的.\31 px元素：

.\31 px {
  color: red;
}

<div class="1px">Hello, world!</div>

Answer 3

对于仍然对此主题感兴趣的人，我发现了一种情况，选择器看起来像数字，而选择器是数字。这是@keyframes规则中的内容。
示例：

@keyframes anim {
 .6% {color:white;}
 100% {color:red;}
}

它们实际上是百分比（没有%符号就无法使用），但是它们以一个数字甚至一个句点和一个数字开头，因此这些是选择器的实际示例，如果{类.6%的{1}}是允许的。