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

如何解决“--”是有效的 CSS3 标识符吗？

根据 CSS 级别 3 What is "export default" in JavaScript?，要解析标识符的开头，您：

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

看第一个代码点：

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

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

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

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

解决方法

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

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

相关：Can a css variable name start with a number?

,

-- 自定义属性标识符 is reserved for future use，但当前浏览器错误地将其视为有效的自定义属性。

另见

• w3c/csswg-drafts#6313