原生range输入框无法实现离散星星评分，应改用radio+label结构配合~兄弟选择器实现全星高亮，注意HTML顺序、可访问性及touchstart/click双事件监听以保障多端体验。
HTML原生<input type="range">无法直接实现评分星星效果
浏览器原生滑块控件不支持自定义为离散的星星图标，也不能点击单个星星独立触发评分（比如只点第三颗星就设为3分）。它只能拖动连续数值，且样式受限，appearance: none之后仍需大量CSS hack才能勉强对齐，交互反馈也缺失。
常见错误现象：TypeError: Cannot read property 'value' of null——误以为给<input type="range">加data-stars就能模拟星星点击；或用:nth-child()强行覆盖<input>伪元素，结果在Safari里完全失效。
- 真正可用的起点是
<div>容器 + 一组<button>或<label>包裹的<input type="radio"> - 必须禁用默认表单行为：给每个
<input>加name属性确保单选，但tabindex="-1"防止键盘聚焦干扰视觉反馈 - 用
aria-label="评分 3 星"补充可访问性，否则屏幕阅读器只会读“未选中”
CSS实现星星高亮时~选择器比+更可靠
很多教程用input:checked + label::before只高亮当前星，但用户实际需要“点亮≤当前星的所有星星”（如点第4颗，前4颗都变黄）。这时必须依赖兄弟选择器~，且HTML结构顺序不能错。
关键约束：<input>必须放在对应<label>之前，且所有<input>和<label>同级排列。否则input:checked ~ label会漏掉前面的星星。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确结构示例：
<input type="radio" name="rating" id="star5" value="5"><label for="star5"></label><input type="radio" name="rating" id="star4" value="4"><label for="star4"></label>
- 避免用
float或inline-block导致DOM顺序与视觉顺序不一致（影响~匹配） - Firefox对
~的支持稳定，但IE11及以下完全不支持——若需兼容，得回退到JS监听change事件手动加class
JavaScript增强交互时别直接操作innerHTML重绘星星
动态生成星星数量（比如允许评1–10星）时，有人习惯用container.innerHTML = starsHtml，这会导致已绑定的事件监听器丢失、焦点状态重置、甚至触发两次change事件（因DOM重建引发input值重置再赋值）。
更安全的做法是复用现有节点，只更新textContent或className：
- 预先渲染全部可能的星星（如最多10颗），用
display: none控制显隐，而非删增DOM - 监听
click而非change——因为radio在label上点击时change可能延迟触发，造成视觉反馈滞后 - 如果要用SVG星星，务必给每个
<path>加pointer-events: none，否则<label>的点击区域会被SVG遮挡
移动端触摸场景下touchstart比click更及时
在iOS Safari或安卓Chrome里，click有约300ms延迟，用户点星星后要等半秒才高亮，体验明显卡顿。直接绑定touchstart能消除延迟，但要注意兼容处理。
- 必须同时监听
touchstart和click，并用event.preventDefault()阻止touchstart后的默认click冒泡（否则可能触发两次） - 不要只靠
ontouchstart检测设备——某些安卓平板在桌面模式下touchstart不可用，应以'ontouchstart' in window为依据动态绑定 - 真机测试时发现：三星One UI的WebView里
touchstart在label上偶尔不触发，稳妥做法是把事件监听器挂到父容器，再用event.target.matches('label[for^="star"]')过滤
星星组件真正的复杂点不在样式，而在触控、键盘、屏幕阅读器三者交互状态的同步——比如用户用Tab键聚焦到第2颗星按空格选中，此时鼠标悬停在第4颗星上，视觉高亮该显示2颗还是4颗？这个细节几乎没人提，但会影响WCAG 2.1标准符合性。
