စတုံးစက် လိုင်းချိန် အမျိုးမျိုး အမျိုးမျိုး

用局部变量覆盖全局变量

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

请看上一页中的例子：

ဌာန်း

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

亲自试一试

အချိန်ကတည်းက အမှတ်အသင်းကို ပုံမှာ စားသုံးကြရာ မှာ အချိန်ကတည်းက ပြင်ဆင်ကြရာ မှာ အသုံးပြုကြရသည်။

ဘက်တန်း အမှတ်အသင်း အမှတ်အသင်း --blue က အလွန် အခုအခါ အသုံးပြုကြရာ ဘက်တန်း အမှတ်အသင်း --blue က အခုအခါ တွင် ပြင်ဆင်နိုင်ပါသည်။ ထို့ပြင် အခုအခါ တွင် var(--blue) ကို အသုံးပြုလျှင် အခုအခါ တွင် ပြင်ဆင်ထား အမှတ်အသင်း --blue က အသုံးပြုသည်။

ကျွန်တော်တို့ ကို နေရာအသုံးပြု အမှတ်အသင်း --blue က ဘက်တန်း အမှတ်အသင်း --blue ကို အပေးကျရသည်ကို မြင်တွေ့ကြသည်:

ဌာန်း

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

亲自试一试

အသစ် နေရာအသုံးပြု အမှတ်အသင်း ပြင်ဆင်

တစ်ခုတည်းသော နေရာတစ်ခုတွင် အမှတ်အသုံးပြုကြသော အမှတ်အသင်းကို အသစ် နေရာအသုံးပြု အသုံးပြုနိုင်ပါသည်။ အထူးသဖြင့်ကား:

ဌာန်း

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

亲自试一试

浏览器支持

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

函数
var() 49.0 15.0 31.0 9.1 36.0

CSS var() 函数

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