自定义 CSS 属性是否使用一个或两个前导破折号?

本文介绍了自定义 CSS 属性是否使用一个或两个前导破折号?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 #elem { -myCustom: 99; }

或

#elem { --myCustom: 99; }

我在网上的例子中看到了上述两种方法.两者有什么区别?

I have seen both of the above used in examples online. What the difference between the two?

尝试在 JavaScript 中访问自定义属性返回 null..

Trying to access custom properties in JavaScript returns null..

#elem { -myCustom: 99; } <div id="elem">some text</div> elem = document.getElementById("elem"); style= window.getComputedStyle(elem); value = style.getPropertyValue('-myCustom'); alert(value);

推荐答案

• 单个前导短划线用于供应商前缀
• 双前导短划线用于定义自定义属性.

2 定义自定义属性:'--*' 系列属性

自定义属性是名称以两个破折号开头的任何属性(U+002D HYPHEN-MINUS)，如 --foo.<custom-property-name>生产对应于此:它被定义为任何有效的标识符以两个破折号开头.

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.

W3C 的一个例子:

:root { --main-color: #06c; --accent-color: #006; } /* The rest of the CSS file */ #foo h1 { color: var(--main-color); }

值得注意的是，CSS 变量是在 Firefox 31 及更高版本中实现的.

It's worth noting that CSS variables are implemented in Firefox 31 and newer.