标签中low和high定义中性区间端点，与optimum共同决定语义着色；需满足min
high和low不是报警阈值，而是定义“中性区间”的两个端点；它们和optimum共同决定浏览器如何对<meter></meter>内部值做语义着色，但颜色本身不固定、不可跨浏览器预测。high 和 low 必须构成合法数值区间
浏览器只在
min 成立时才启用三段式语义渲染。任意一环断裂（比如 <code>low="0"但min="0"），整个低/高状态都会失效，<meter></meter>退化为仅显示 value 在 [min, max] 中的相对位置（无色块）。
low必须严格大于min，不能等于；设low="0"+min="0"→ 浏览器忽略lowhigh必须严格小于max，且必须大于已设置的low；high="100"+max="100"→ 高区间消失- 若只设
low或只设high，另一侧默认收束到optimum附近，行为不稳定，不建议value 落在哪一段，取决于它和 low/high 的数值关系
value的语义区域不是靠“越界”触发，而是看它落在哪个闭区间内。例如：<meter min="0" max="100" low="30" high="70" value="25"></meter>中，value="25"属于[min, low]，即“低区间”；而value="15"同样属于该区间——它不会因为更小就变成“过低”，除非optimum显著偏移导致浏览器内部重判。
value ≤ low→ “低区间”（非警告，是正常低值范围）low → “中区间”value > high→ “高区间”（注意：不是value ≥ high）- Chrome/Firefox 对边界值（如
value === low）的判定略有差异，不要依赖精确相等optimum 改变的是“哪一段算最佳”，不是直接改颜色
optimum不控制颜色名，只参与浏览器内部的“距离权重”计算。当optimum设在low左侧（如optimum="10"），那么[min, low]区间反而可能被识别为“最佳区域”，从而获得绿色；而原本的[low, high]反倒变成“次佳”（黄色）甚至“偏差”（红色）。
- 想让 40–60% 是绿色？不要只调
low="40" high="60"，必须同步设optimum="50"optimum若落在[low, high]外，浏览器会把离它最近的区间标为“最佳”，其余按远近分黄/红- 没有
optimum时，浏览器默认以(min + max) / 2为理想点，但这个行为未标准化，各引擎可能不同样式定制必须用伪元素，且浏览器支持度割裂
你无法通过
class或普通 CSS 选择器控制<meter></meter>的色块，所有视觉干预都得走伪元素路径，而各浏览器暴露的钩子完全不同：
- Chrome/Edge：支持
::-webkit-meter-inner-element、::-webkit-meter-bar、::-webkit-meter-optimum-value等- Firefox：只认
::-moz-meter-bar和::-moz-meter-optimum，不支持“低/高”细分伪类- Safari：基本不支持任何
<meter></meter>伪类，设了也无效::-webkit-meter-even-less-good-value在 Chrome 中对应 value 远离optimum且 ≤low或 ≥high的极端情况，但 Safari 完全不识别真正可控的做法，是放弃伪元素，改用
<div> + ARIA role="meter" + 手动 CSS 渲染 —— 尤其当你需要一致颜色、响应式缩放或 IE 兼容时。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
