自定义属性 (--*):CSS变量
带有前缀--
的属性名,比如--example--name
,表示的是带有值的自定义属性,其可以通过 var
函数在全文档范围内复用的。
CSS 自定义属性是可以级联的:每一个自定义属性可以多次出现,并且变量的值将会借助级联算法和自定义属性值运算出来。
语法
--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);
}
结果
规范
Specification | Status | Comment |
---|---|---|
CSS Custom Properties for Cascading Variables Module Level 1 --* |
Candidate Recommendation | Initial definition |
浏览器兼容
BCD tables only load in the browser