优先用 css 伪元素 + 字体图标或单个 svg sprite；禁用 input[type="range"]，改用可点击的 button/span 元素；统一 vertical-align 和 flex 布局防跳动；绑定 pointerdown 事件并处理取消评分与 disabled 样式。
星星评分条用 ★ 还是 SVG？选错会卡顿
直接用 Unicode 星星字符 ★（实心）和 ☆（空心）最轻量，但缩放不清晰、颜色难单独控制；SVG 虽灵活，但 5 颗星嵌入 5 个 <svg></svg> 标签后，DOM 节点多、React/Vue 渲染慢。实际项目中，优先用 CSS 伪元素 + 字体图标（如 Font Awesome 的 fa-star）或单个 SVG sprite，避免每颗星独立加载。
常见错误：用 <img> 标签加载 5 张 PNG 星星图——HTTP 请求翻倍，且 hover 切换时有闪烁。正确做法是用背景图 sprite 或 inline SVG。
input[type="range"] 不能当评分条用
原生滑块控件 <input type="range"> 拖动精度高，但用户无法“点选第 3 颗星”，也不支持只读展示。评分场景必须用可点击的离散元素，而非连续值控件。
实操建议：
- 用
<button></button>或带role="button"的<span></span>包裹每颗星，确保键盘可聚焦、Enter可触发 - 禁用
tabindex="-1"，否则屏幕阅读器跳过评分区域 - 给当前选中星加
aria-current="true"，方便辅助技术识别
CSS 实现五星对齐与悬停反馈的关键参数
字体图标方案下，font-size 和 line-height 必须一致，否则星星上下错位；SVG 方案则要统一 viewBox 和 width/height 比例。悬停时常见问题不是“变色”，而是“整行跳动”——根源在默认 vertical-align: baseline。
稳定排版写法：
- 所有星星元素设
vertical-align: middle - 父容器用
display: inline-flex或display: flex，避免浮动或inline-block的间隙 - 悬停动画用
transform: scale(1.2)替代font-size改变，防止重排 - 禁用
user-select: none，否则 iOS Safari 点击失效
JavaScript 绑定点击事件时漏掉的两个状态
只监听 click 事件不够：移动端 touch 事件可能触发两次（touchstart + click），鼠标右键点击也会触发。更严重的是，没处理“取消评分”逻辑——用户点回第 2 颗星，但第 3~5 颗星仍高亮。
安全写法：
- 用
event.preventDefault()阻止右键菜单干扰 - 绑定
pointerdown而非click，兼容触屏与鼠标 - 点击某颗星后，用
for循环从第 1 颗遍历到该星索引，逐个添加active类；再清空后续所有星的类 - 保留一个隐藏
<input type="hidden">同步值，避免表单提交丢失
别忘了 disabled 状态的样式覆盖——opacity: 0.5; pointer-events: none; 必须同时设置，否则禁用后仍能点中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
