CSS无法根据数值做条件判断，counter()仅生成字符串编号，calc()不支持变量内逻辑运算；必须由JS计算数值映射颜色后注入CSS变量，再由CSS绑定渲染。
css 本身不能根据数值做条件判断，counter() 是纯展示用的编号工具，不参与计算；css variables（即 --var）也不能在样式规则中做数值比较或范围映射。所谓“用 CSS 实现数值驱动颜色”，本质是前端把计算逻辑交给 JS，CSS 只负责接收和渲染。
为什么不能靠 counter() 或 calc() + var() 做数值分色
很多人误以为给元素加 counter-increment: value 18，再用 content: counter(value) 就能触发样式分支——但计数器只生成字符串，无法被 :nth-child 或媒体查询识别为数字；更关键的是，calc(var(--num) * 2) 这类写法在 CSS 中会静默失败，因为 var(--num) 被当作字符串代入，不是数值。浏览器不会报错，但结果往往变成 0 或无效值。
-
counter()只用于有序列表、章节编号等语义化计数，不暴露数值供选择器使用 -
calc()支持基本四则运算，但不支持变量嵌套计算（calc(var(--a) + var(--b))合法，calc(var(--a) > 10 ? 1 : 0)完全非法） - 没有
if、switch、range等运行时逻辑能力，CSS 不是编程语言
真正可行的方案：JS 计算 + CSS 变量注入
核心流程是：JS 读取数值 → 判断区间 → 算出对应颜色 → 注入 --mapped-color → CSS 用该变量设色。这样既保持样式声明集中，又避免内联 style 污染结构。
- 先在
:root或目标元素上定义变量占位：:root { --mapped-color: #000; } - JS 中用
Math.min()/Math.max()算真实数据域，避免硬编码阈值导致截断（比如数据最大值是 127，却设[0, 100]当 domain） - 颜色映射优先选 blue→orange 渐变，避开红/绿邻近色区，对色觉障碍用户友好
- 注入时用
element.style.setProperty('--mapped-color', 'rgb(80, 120, 200)')，别传#5078c8或hsl(...)字符串——WebGL 或 Canvas 若后续要用，必须是数值数组
常见翻车点：CSS 变量名拼错、作用域没对齐
最容易忽略的是变量作用域和命名一致性。比如在 :root 定义了 --bg-hue，却在子元素里写 background: hsl(var(--bg-hue), 70%, 60%)，而 JS 实际注入的是 --mapped-hue，结果就是黑底白字——什么都没变，还查不出错。
立即学习“前端免费学习笔记（深入）”；
- 检查变量名是否完全一致（大小写敏感），推荐统一用 kebab-case，如
--text-color-level - 确保
setProperty调用的目标元素，和 CSS 中使用该变量的选择器匹配（例如注入到.cell元素，就别在td上写color: var(--text-color-level)） - 不要指望
transition: color 0.2s对变量变化生效——CSS 变量本身不触发重绘，得靠属性绑定，比如color: var(--text-color-level)才行
真正难的不是写几行 JS 或几个 class，而是让数值域、色系选择、变量注入、CSS 接收这四个环节严丝合缝。任意一环松动，颜色就可能错位、截断或静默失效——尤其是多人协作时，JS 和 CSS 分属不同文件，变量名和阈值很容易脱节。
