直接用 --step-index 控制步骤条需结合 calc() 与伪元素定位，css 无条件判断，须将“第 n 步激活”转为可计算表达式；因 safari 等浏览器不支持 var() 在 :nth-child 中，推荐 js 动态添加 class。
直接用 --step-index 控制步骤条激活状态是可行的，但必须配合 calc() 和伪元素定位逻辑，不能只靠变量值做布尔判断——CSS 没有 if/else，得把“第 n 步激活”转译成“第 n 个 .step-circle 加 step-circle-active 类”或“.step-line:before 宽度为 (n-1) * 100px”这类可计算表达式。
用 calc() 把索引变量转成宽度或偏移量
CSS 变量本身不参与条件判断，但能参与数学运算。比如你定义了 --current-step: 3，想让前 3 个节点高亮、前 2 条连线填满，就得写成：
-
.step-circle:nth-child(-n + var(--current-step)) { background-color: var(--active-color); }—— 注意：这个写法在部分浏览器（如 Safari 16.6 之前）不支持var()在:nth-child中，实际应避免 - 更稳妥的是用 JS 控制 class：
document.querySelectorAll('.step-circle').forEach((el, i) => el.classList.toggle('step-circle-active', i - 进度条连线宽度推荐用
width: calc((var(--current-step) - 1) * 100px)，前提是每个 step 间距固定为 100px；单位必须显式写出，calc(var(--current-step) - 1) * 100会报错
style.setProperty() 更新变量后样式不生效？检查这三点
常见现象是调用了 document.documentElement.style.setProperty('--current-step', '4')，但节点没变亮。原因往往不是 JS 写错了，而是 CSS 层面没对齐：
- 确保
--current-step初始值在:root里定义且带单位（如--current-step: 1;，纯数字即可，不需要1px或1%） - 别在伪元素（如
.step-line:before）里用var(--current-step)做left或transform: translateX()计算——部分旧版 Chrome 对伪元素读取根变量有延迟，建议把变量透传到真实 DOM 元素上再用 - 如果用了
transition，确保目标属性（如background-color或width）本身支持过渡；calc()衍生出的宽度变化是可过渡的，但display或z-index不行
为什么不用 rgb() 或 hsl() 变量控制步骤颜色？
可以，但没必要。步骤条的激活色通常是固定主题色，用 --active-color: #3498db 就够了。只有当你需要「随步骤数渐变色」（比如 step1 蓝、step2 绿、step3 橙）才值得拆 RGB/HSL：
- 拆 HSL 更直观：
--hue: calc(240 - (var(--current-step) - 1) * 60);，然后background: hsl(var(--hue), 70%, 60%) - RGB 拆分容易溢出（
calc(255 - var(--current-step) * 100)可能算出负数），浏览器会静默截断，导致颜色突变 - 注意：HSL 的
hue是 0–360 数值，不带单位；saturation和lightness必须带%，漏掉就无效
真正容易被忽略的是：CSS 变量更新后，浏览器不会重排（reflow），但会重绘（repaint）——所以依赖 width、background-color 这类视觉属性的变化是可靠的；但如果你靠 var(--current-step) 控制 grid-column 或 order，就得确认对应布局模式是否响应变量变更（Flex/Grid 大多支持，table 布局基本不支持）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
