CSS变量名称可以以数字开头吗? [英] Can a css variable name start with a number?

问题描述

我想知道定义以这样的数字开头的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 https://jigsaw.w3.org/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;

https://www.w3.org/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);
}

这篇关于CSS变量名称可以以数字开头吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！