参考手册
CSS3 变量
CSS3 JavaScript与变量
返回 CSS3 变量

CSS 覆盖变量

用局部变量覆盖全局变量

从上一页我们了解到，可以在整个文档中访问/使用全局变量，而局部变量只能在声明它的选择器内使用。

请看上一页中的例子：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. :root {
  6.   --blue: #1e90ff;
  7.   --white: #ffffff;
  8. }
  10. body {
  11.   background-color: var(--blue);
  12. }
  14. h2 {
  15.   border-bottom: 2px solid var(--blue);
  16. }
  18. .container {
  19.   color: var(--blue);
  20.   background-color: var(--white);
  21.   padding: 15px;
  22. }
  24. button {
  25.   background-color: var(--white);
  26.   color: var(--blue);
  27.   border: 1px solid var(--blue);
  28.   padding: 5px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  34. <h1>使用 var() 函数</h1>
  36. <div class="container">
  37.   <h2>欢迎来到成都！</h2>
  38.   <p>成都，是四川省省会、副省级市、特大城市、成渝地区双城经济圈核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽。</p>
  39.   <p>成都地处中国西南地区，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</p>
  40.   <p>
  41.     <button>是</button>
  42.     <button>否</button>
  43.   </p>
  44. </div>
  46. </body>
  47. </html>
运行一下

有时，我们希望变量仅在页面的特定部分中进行更改。

假设我们想要按钮元素使用不同的蓝色。那么，我们可以在 button 选择器内重新声明 —blue 变量。当我们在这个选择器中使用 var(—blue) 时，它将使用此处声明的局部 —blue 变量值。

我们看到局部的 —blue 变量会覆盖 button 元素的全局 —blue 变量：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. :root {
  6.   --blue: #1e90ff;
  7.   --white: #ffffff;
  8. }
  10. body {
  11.   background-color: var(--blue);
  12. }
  14. h2 {
  15.   border-bottom: 2px solid var(--blue);
  16. }
  18. .container {
  19.   color: var(--blue);
  20.   background-color: var(--white);
  21.   padding: 15px;
  22. }
  24. button {
  25.   --blue: #0000ff;
  26.   background-color: var(--white);
  27.   color: var(--blue);
  28.   border: 1px solid var(--blue);
  29.   padding: 5px;
  30. }
  31. </style>
  32. </head>
  33. <body>
  35. <h1>用局部变量覆盖全局变量</h1>
  37. <div class="container">
  38.   <h2>欢迎来到成都！</h2>
  39.   <p>成都，是四川省省会、副省级市、特大城市、成渝地区双城经济圈核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽。</p>
  40.   <p>成都地处中国西南地区，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</p>
  41.   <p>
  42.     <button>是</button>
  43.     <button>否</button>
  44.   </p>
  45. </div>
  47. </body>
  48. </html>
运行一下

添加一个新的局部变量

如果只在一个地方使用一个变量，我们也可以声明一个新的局部变量，就像这样：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. :root {
  6.   --blue: #1e90ff;
  7.   --white: #ffffff;
  8. }
  10. body {
  11.   background-color: var(--blue);
  12. }
  14. h2 {
  15.   border-bottom: 2px solid var(--blue);
  16. }
  18. .container {
  19.   color: var(--blue);
  20.   background-color: var(--white);
  21.   padding: 15px;
  22. }
  24. button {
  25.   --button-blue: #0000ff;
  26.   background-color: var(--white);
  27.   color: var(--button-blue);
  28.   border: 1px solid var(--button-blue);
  29.   padding: 5px;
  30. }
  31. </style>
  32. </head>
  33. <body>
  35. <h1>新的局部变量</h1>
  37. <div class="container">
  38.   <h2>欢迎来到成都！</h2>
  39.   <p>成都，是四川省省会、副省级市、特大城市、成渝地区双城经济圈核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽。</p>
  40.   <p>成都地处中国西南地区，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</p>
  41.   <p>
  42.     <button>是</button>
  43.     <button>否</button>
  44.   </p>
  45. </div>
  47. </body>
  48. </html>
运行一下

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

函数
var()49.015.031.09.136.0

CSS var() 函数

函数描述
var()插入 CSS 变量的值。
CSS3 JavaScript与变量

分类导航