meter的low/high颜色由浏览器ua样式控制，无法用css直接修改；chrome通过伪元素实现三段着色但不对应low/high语义，firefox几乎不渲染分段色，safari支持极弱，跨浏览器一致配色必须放弃原生逻辑，改用js+aria+自定义class方案。
meter的low/high颜色由浏览器UA样式控制，不能用CSS直接改
想给meter::value或meter::-webkit-meter-bar——这些伪元素不暴露可稳定控制的类名，且Chrome/Firefox/Safari各自实现差异大。主流浏览器（包括2026年最新版）压根没提供标准CSS接口让你覆盖low/high对应的颜色逻辑。
常见错误是写.meter-red { background: red; }或试图用:host(:--low)，结果发现完全无效。原因很简单：low/high触发的是浏览器内置的语义着色规则，不是CSS类切换，也不是自定义状态伪类。
- Chrome用
::-webkit-meter-optimum-value、::-webkit-meter-suboptimum-value、::-webkit-meter-even-less-good-value三类伪元素，但它们不对应low/high，而是基于value与optimum的相对距离动态生成 - Firefox几乎不渲染low/high分段色，默认只画灰条；你看到的“红色”可能是value超出
[min, max]时的异常态，不是low区间 - Safari对
::-webkit-伪元素支持更弱，且不保证和Chrome一致
想让low区间变红，必须满足min
颜色不是靠low值本身决定的，而是浏览器根据五个属性算出三段区间后，再比对optimum落在哪一段，从而决定哪段绿、哪段黄、哪段红。low=30本身不会让30以下变红——只有当optimum ≤ low时，[min, low]段才可能被标为“偏差最大”，从而倾向红色。
-
<meter value="25" min="0" max="100" low="30" high="70" optimum="10"></meter>→ value=25落在[min, low]，optimum也在这一段，所以整段是绿色（最优），不是红 -
<meter value="25" min="0" max="100" low="30" high="70" optimum="80"></meter>→ optimum在第三段，[min, low]变成最远段，此时才大概率渲染为红色背景 - 缺
optimum时，浏览器按(min + max) / 2估算，行为不可控；必须显式设，且值要落在合法区间内 - low必须严格大于min，high必须严格小于max；
low="0"或high="100"会导致对应区间失效
修改low/high后颜色不更新？用setAttribute()，别碰DOM属性
这是最常踩的坑：meter.low = 40或meter.high = 80赋值后，视觉毫无变化。因为浏览器只响应HTML属性变更，不监听DOM属性setter。
- ✅ 正确：
meter.setAttribute("low", "40")、meter.setAttribute("high", "80") - ❌ 错误：
meter.low = 40、meter["high"] = "80"、meter.setAttribute("LOW", "40")（大小写敏感） - 设完建议加
meter.offsetWidth强制重排，避免Chrome下样式延迟生效 - 如果同时改
min/max，必须确保新值仍满足min ，否则整个分段逻辑静默退化
真正可控的颜色方案：放弃meter，用div+ARIA模拟
如果你需要精确控制每一段颜色（比如low区间#ff6b6b、mid区间#4ecdc4、high区间#45b7d1），<meter></meter>不是合适选择。它的设计目标是语义表达，不是视觉定制。
推荐做法是用<div role="meter">配合CSS进度条，手动计算value占比，并用JS判断区间后添加对应class：
<pre class="brush:php;toolbar:false;"><div role="meter" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="bar"><span class="fill low"></span></div>
</div></pre>
<p>然后CSS里写<code>.low { background: #ff6b6b; }、.mid { background: #4ecdc4; }。这样既保无障碍（ARIA属性），又完全掌控颜色、动画、响应式行为。
原生<meter></meter>的low/high颜色逻辑本质是“浏览器猜你想要什么”，而猜的结果取决于五个属性的数值关系、optimum位置、甚至浏览器引擎版本——它从来就不是为你做UI定制准备的。
