自定义属性 (--)：CSS 变量

基线广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本上运行。自以下时间起，它在所有浏览器中都可用 2017 年 4 月.

以--为前缀的属性名称，如--example-name，表示自定义属性，它们包含一个值，该值可以使用var()函数在其他声明中使用。

自定义属性的作用域与其声明的元素相同，并且参与级联：此类自定义属性的值是级联算法决定的声明中的值。

初始值	参见散文
应用于	所有元素
继承	是
计算值	按指定，并替换变量
动画类型	离散

语法

css

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

<declaration-value>: 此值匹配任何一个或多个标记的序列，只要该序列不包含任何不允许的标记。它表示有效的声明可以作为其值的全部内容。

注意：自定义属性名称区分大小写 - --my-color将被视为与--My-color不同的自定义属性。

示例

HTML

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

css

:root {
  --first-color: #16f;
  --second-color: #ff7;
}

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

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

#container {
  --first-color: #290;
}

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

结果

规范

规范
CSS 自定义属性用于级联变量模块级别 1 # defining-variables

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。