CSS متغیر کی کوری

用局部变量覆盖全局变量

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

请看上一页中的例子：

ਉਦਾਹਰਣ

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  بگارنگ رنگ: var(--white);
  پیداواری: 15پایکس;
}
بٹن {
  بگارنگ رنگ: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  پیداواری: 5پایکس;
}

آپ خود کوشش کریں

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

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

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

ਉਦਾਹਰਣ

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  بگارنگ رنگ: var(--white);
  پیداواری: 15پایکس;
}
بٹن {
  --blue: #0000ff;
  بگارنگ رنگ: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  پیداواری: 5پایکس;
}

آپ خود کوشش کریں

添加一个新的局部变量

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

ਉਦਾਹਰਣ

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  بگارنگ رنگ: var(--white);
  پیداواری: 15پایکس;
}
بٹن {
  --button-blue: #0000ff;
  بگارنگ رنگ: var(--white);
  رنگ: var(--button-blue);
  بوردر: 1پایکس سولڈ var(--button-blue);
  پیداواری: 5پایکس;
}

آپ خود کوشش کریں

مرورکر کی پشتیبانی

جداول میں نمبر کا ذکر کردیا گیا ہے، جو اس خاصیت کا پورا پورا پشتیبانی کرنے والا پہلا مرورکر کا ورژن ہے。

فنکشن
var() 49.0 15.0 31.0 9.1 36.0

CSS var() فنکشن

فنکشن وصف
var() CSS متغیر کا مرتبہ درج کریں