ຜົນງານສະໜາມການກະກຽມ CSS

用局部变量覆盖全局变量

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

ບອກກັບຄືນຄົນຂອງກ່ອນ:

ຄວາມຄົນ

: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;
}

亲自试一试

ບາງຄັ້ງພວກເຮົາຕ້ອງການວ່າຫນັກວັດຖຸຈະປ່ຽນແປງພຽງແຕ່ໃນບາງສ່ວນຂອງເວັບໄຊ:

ຖ້າພວກເຮົາຕ້ອງການວ່າຫນັກວັດຖຸ button ໃຊ້ສີສີຂຽວທີ່ຫຼາຍກວ່າຫນັກວັດຖຸ --blue:

ພວກເຮົາເຫັນວ່າຫນັກວັດຖຸທີ່ຫນັກສະໜາມທີ່ພາຍໃນຫນັກວັດຖຸ button ຈະປົກປັນຫນັກວັດຖຸທີ່ຫນັກສະໜາມທີ່ພາຍໃນຫນັກວັດຖຸ --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

ກົດລະບຽບ var() CSS

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