自定义属性 (--*)：CSS 变量
以 -- 为前缀的属性名称，例如 --example-name，表示自定义属性，它们包含一个值，该值可以使用 var() 函数在其他声明中使用。
自定义属性的作用域仅限于它们声明的元素，并参与层叠：此类自定义属性的值是由层叠算法决定的声明中的值。
语法
css
--some-keyword: left;
--some-color: #123456;
--some-complex-value: 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: #1166ff;
--second-color: #ffff77;
}
#firstParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
#secondParagraph {
background-color: var(--second-color);
color: var(--first-color);
}
#container {
--first-color: #229900;
}
#thirdParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
结果
规范
| 规范 |
|---|
| CSS Cascading Variables Module Level 1 的自定义属性 # 定义变量 |
浏览器兼容性
加载中…
另见
var()函数@property@ 规则- 使用 CSS 自定义属性（变量）指南
- CSS 级联变量的自定义属性模块