low 属性是语义锚点而非视觉开关，需配合 optimum 和 CSS 伪类才能生效；单独设置 low 不触发变色，且必须满足 min < low < high < max，否则降级渲染。
low 属性不是“低值显示开关”，而是语义锚点
它本身不触发任何视觉变化，也不自动让浏览器标红——只是告诉浏览器：“低于这个数，就属于‘偏低’语义区间”。真正起作用的是 optimum 和浏览器对 meter 的内置着色逻辑（比如 Chrome 会根据 value 相对于 low/high/optimum 的位置切换伪元素状态）。
常见错误是只设 low="30" 就指望进度条变红，结果毫无反应。原因在于：optimum 缺失或设置不当，或没配 CSS 捕获对应伪类。
-
low必须大于min，且小于high和max；违反则整个meter可能被降级渲染（如回退为灰条） - 若
optimum设在low左侧（如min="0" low="30" optimum="10"），表示“越低越好”，此时value ≤ low反而可能触发绿色（理想态） - Firefox 不支持
meter::-moz-meter-optimum等伪类，只能靠属性选择器兜底，比如meter[value<=30]
怎么让 low 区间真正“看得见”
浏览器默认样式几乎不体现 low/high/optimum，必须手动干预。最可靠的方式是组合属性选择器 + 伪元素：
例如想让 value ≤ 30 时背景变浅红：
立即学习“前端免费学习笔记（深入）”；
meter[value<=30] {
background: #ffebee;
}
meter::-webkit-meter-bar {
background: transparent;
}
meter::-webkit-meter-optimum-value {
background: #4caf50;
}
meter::-webkit-meter-suboptimum-value {
background: #ff9800;
}
meter::-webkit-meter-even-less-good-value {
background: #f44336;
}
注意：::-webkit-meter-even-less-good-value 在 Chrome 中对应 value 远离 optimum 且落在 low 以下（或 high 以上）的状态，但 Safari 不支持该伪类。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要只依赖
::-webkit-meter-bar：它控制底栏，但着色逻辑实际由 value 与 optimum 的相对位置决定 - IE 完全不支持
meter，需用<div role="meter">+ JS 模拟，low属性得转为 data-low 存储 - 动态更新
low值时（如meterEl.low = 25），部分浏览器不会重绘伪元素，建议替换整个元素或强制meterEl.style.cssText += ';'
low 和 high 配合使用时的边界陷阱
很多人以为 low="30" high="70" 就自然划分出 [0,30)、[30,70]、(70,100] 三个区间，其实不是。浏览器只做两件事：
- 判断
value是否 ≤low→ 触发“偏低”语义 - 判断
value是否 ≥high→ 触发“偏高”语义 - 中间段（
low < value < high）不自动归为“正常”，它只是未被标记为偏高/偏低
所以 low="30" high="70" 时，value="30" 和 value="70" 都会被视为临界点，而非区间起点/终点。若要强调“30 是低区上限”，应设 low="29.999" 并配合 CSS 精确匹配。
更麻烦的是：当 optimum="50" 时，value="30" 虽然 ≤ low，但离 optimum 并不远，Chrome 可能仍用黄色（suboptimum）而非红色（even-less-good）。这时得靠 CSS 强制覆盖：
meter[value<=30]::-webkit-meter-bar { background: #f44336; }
什么场景下 low 属性根本不该用
如果你的数据没有公认的“偏低”业务定义，或者阈值会频繁变动（比如按用户等级动态调整低水位），硬塞 low 只会让语义混乱。
- 温度显示（-20℃ ~ 40℃）：设
low="-10"没意义——冷热感知因人而异，应交由后端或 JS 计算状态并加 class - 用户评分（1~5 星）：设
low="2"容易引发歧义（2星是差还是及格？），不如直接用<span class="rating-bad">2</span> - 实时 CPU 使用率：阈值随机器配置变化，
low写死在 HTML 里会导致前端无法响应策略变更
真正需要 low 的，是那些标准明确、无需解释的指标：磁盘剩余空间低于 10%、电池电量 ≤ 15%、服务 SLA 达成率
