前端Wiki/CSS3/深入/现代特性

CSS 自定义属性

自定义属性（变量）在 CSS3 后期正式定稿，语法以 -- 定义、var() 读取，但它比普通变量强大得多：它是真实的 DOM 属性，会继承、可在运行时被 JS 修改。

全局主题：:root { --primary: #39c5cf; }，全站引用一处换肤。
局部作用域：变量定义在哪个元素上就作用到哪个元素的子树，可以给某个卡片单独覆盖 --primary。
JS 联动：el.style.setProperty('--x', value)，改一个变量，所有引用处即时生效——比逐个改样式高效得多。

变量最出彩的场景是用 JS 只改数字、CSS 负责计算和呈现：比如拖动滑块只更新 --hue，整个页面配色实时变化。它也常和 calc() 组合做动态布局参数。

本节要点-- 定义、var() 读取、:root 放全局变量；变量沿子树继承，可局部覆盖；JS 用 setProperty 修改变量即可批量更新样式，是换肤和动态参数的标准方案。

CSS

<style>
  :root {
    --primary: #39c5cf;
    --size: 14px;
  }
  .btn {
    background: var(--primary);
    font-size: var(--size);
    color: #fff;
    border: none; padding: 8px 18px;
  }
  /* 局部覆盖：只影响这个卡片内部 */
  .card {
    --primary: #7c4dff;
    padding: 12px;
    border: 2px solid var(--primary);
  }
</style>
<button class="btn">全局主题色按钮</button>
<div class="card">
  <button class="btn">卡片内变成紫色</button>
</div>

🔗 相关词条CSS3 calc CSS 作用域 var DOM JS 元素

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读