“--”是有效的 CSS3 标识符吗？

Question

根据 CSS 3 级规范，为了解析标识符的开头，您：

检查三个代码点是否会开始一个标识符

看第一个代码点：

• 如果第一个字符是- ，那么我们有一个有效的标识符，如果：
  1. 第二个代码点是标识符起始代码点（ [a-zA-Z_]或非 ASCII）。
  2. 第二个代码点是- 。
  3. 第二个和第三个字符形成一个有效的转义。

否则，我们没有有效的标识符开始。 在确定我们是否有一个有效的标识符开始之后，拥有一个有效的<ident-token>的唯一要求是我们有 0 个或多个以下任意组合：

1. 转义符
2. ASCII 字母
3. 数字
4. _或-
5. 非 ASCII 字符

由于我们不需要标识符开始标记后面的任何字符，这表明--是一个有效的标识符，即使任何浏览器或框架都不支持。 然而，即使是官方的 CSS 验证服务（由设计 CSS 规范的人员维护）也不认为这是一个有效的标识符。 这仅仅是验证服务中的一个错误吗？

Answer 1

是的，它是有效的并且有效。 这是您可以定义的最短的自定义属性（又名 CSS 变量）：

 body { --:red; background:var(--); }

相关： css 变量名可以以数字开头吗？

Answer 2

--自定义属性标识符保留供将来使用，但当前浏览器错误地将其视为有效的自定义属性。

也可以看看

• w3c/csswg-drafts#6313