自定義屬性 (--*)：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 級聯變數的自定義屬性模組