In CSS,identifiers can contain only the characters [a-zA-Z0-9] and
ISO 10646 characters U+00A0 and higher,plus the hyphen (-) and the
underscore (_); they cannot start with a digit,two hyphens,or a
hyphen followed by a digit. Identifiers can also contain escaped
characters and any ISO 10646 character as a numeric code.
因此,– 应该是无效的标识符,因此# – 不应该选择id =“ – ”的元素：
body { color: black }
#-- { color: red }
<p id="--">I should be black.</p>
Attribute values must be identifiers or strings.
但是 – 似乎作为属性值的标识符,至少在Firefox上：
body { color: black }
[id=--] { color: red }
<p id="--">I am red on Firefox.</p>
此外,CSS.escape已被修改为允许 – ：
Minor changes has been made in Firefox 32,to match the spec and the
evolution of the CSS Syntax. The identifier now can begin with--
and the second dash must not be escaped.
根据Wayback Machine,更改发生在2014年4月19日至30日之间：
> 6 Feb 2014 editor’s draft,存储于2014年4月19日.
If the character is the second character and is “-” (U+002D) and the
first character is “-” as well,then the escaped character.
> 30 Apr 2014 editor’s draft,存储于2014年5月4日.
If the character […] is “-” (U+002D) […],then the character
itself.
那么,有一些新的CSS3模块改变了标识符的定义,以便它们有时可以以 – 或者这里到底发生了什么？
解决方法
:root { --color: red; }
p { color: var(--color); }
<p>I am red on Firefox.</p>
有关此功能的浏览器支持的当前状态,请参阅CanIUse.com：CSS Variables (Custom Properties).
虽然css-syntax-3的标识符定义似乎与CSS2.1的定义一致,但它确实对css变量本身进行了大量引用.但是,这些引用似乎都没有解决自定义属性名称使用的 – 前缀.
css变量本身says：
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.
最后一个语句特别有趣,因为解释它与CSS2.1和css-Syntax-3中给出的定义不冲突的唯一方法是模糊性：“以两个破折号开头的标识符”可以表示两个短划线不是标识符的一部分,即：
<custom-property-name> = '-' '-' <ident>
或者它们是,这意味着自定义属性不受标识符的一般定义的约束. < custom-property-name>的语法没有帮助.生产无处可寻,不是在css语法中,也不是在css变量中,也不是在CSSOM中;这个平淡无奇的陈述是唯一可用的定义.
