CSS变量名称可以以数字开头吗?

本文介绍了CSS变量名称可以以数字开头吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想知道定义以这样的数字开头的css变量是否有效，

:root {--1space:32px;}

这在Chrome上可以正常使用，但是

:root {--2222:红色；}身体 {背景:var(-2222);}

I want to know if it is valid to define a css variable that starts with a number like this,

:root { --1space: 32px; }

this works just fine with Chrome, however that code is not being validated by jigsaw.w3/css-validator/ also VSCode draws a red line under the variable name.

if css variable names are idents then it should be ok to start with a number by this diagram;

www.w3/TR/css-syntax-3/#ident-token-diagram

解决方案

Yes it's valid. If we follow the definition in the speficiation:

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. The <custom-property-name> production corresponds to this: it’s defined as any valid identifier that starts with two dashes

And

identifier

A portion of the CSS source that has the same syntax as an <ident-token>. Also appears in <at-keyword-token>, <function-token>, <hash-token> with the "id" type flag, and the unit of <dimension-token>.

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