--*

这是一种实验技术

由于该技术的规范尚不稳定，请查看各种浏览器的兼容性表格以查阅用法。还要注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

带有前缀--的属性名称，如--example-name表示自定义属性，通过使用var()函数，可以在整个文档中重用它所包含的值。

自定义属性参与级联：它们中的每一个都可以出现多次，变量的值将与通过级联算法决定的自定义属性中定义的值相匹配。

语法

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);

<declaration-value>这个值匹配包含一个或多个记号的任何序列，只要该序列不包含不允许的记号。它代表了所有能作为有效声明的值的内容。

形式语法

<declaration-value>

实例

HTML

<p id="firstParagraph">This paragraph should have a blue background and yellow text.</p>
<p id="secondParagraph">This paragraph should have a yellow background and blue text.</p>
<div id="container">
  <p id="thirdParagraph">This paragraph should have a green background and yellow text.</p>
</div>

CSS

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

结果

规范

浏览器兼容性