这些带有双破折号的CSS属性有什么作用？

小编典典

这些带有双破折号的CSS属性有什么作用？

css

我在这里遇到了这个奇怪的CSS代码：

:root {
    --color-link: #04b;
    --color-link-visited: #551a8b;
    --color-link-minor: #669;
    --color-black: #000;
    --color-grey: #999;
    --font-thin: HelveticaNeue-thin,sans-serif-thin;
    --font-light: HelveticaNeue-Light,sans-serif-light;
    --text-s: 11px;
    --text-s-line-s: 1em;
    --text-s-line-m: 1em;
    --typo-caps: 11px;
    --typo-greenurl: 13px;
}

我以前从未见过这样的CSS属性名称，也找不到有关它们的信息。但是浏览器检查器（在Chrome，Safari和Firefox中进行了检查）说它们是有效的CSS属性，因此它必须是CSS标准。

我试图添加我自己的属性，并且它是有效的：

:root {
    --color-foobar: #000;
}

这些属性是做什么的？CSS标准描述了什么？在哪里可以找到有关它的参考？

阅读 380

2020-05-16

共1个答案

小编典典

双引号用于定义自定义属性。

来自W3C的示例：

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}

2020-05-16