原生 radio+label 是最可靠方案：语义正确、无障碍友好、移动端稳定；html 星星需反序排列（5→1），用 :checked ~ 和 direction: rtl 实现点亮；js 仅在 change 且 checked 为 true 时读取值。
直接用原生 input[type="radio"] + label 搭配 CSS 伪类是最可靠、无障碍支持最好、移动端也最稳的方案。别碰纯 div + click 监听，那会丢焦点、键盘不可操作、屏幕阅读器读不出“这是评分”。
radio 星星结构怎么写才不翻车
结构必须保证语义正确、可聚焦、单选互斥：
- 每个星星是
<input type="radio">+ 关联<label for="xxx"></label>，name属性完全一致（如name="rating"） -
value必须为数字（"1"～"5"），不能是中文或空字符串，否则 JS 读取时容易出错 - 不要用
disabled或pointer-events: none禁用未选中项——这会让键盘 Tab 无法到达，破坏可访问性 - 推荐用
<fieldset></fieldset>包裹整组，加<legend></legend>（如<legend>请打分</legend>），辅助技术能立刻识别这是评分区域
:checked 和 ~ 选择器怎么联动高亮
CSS 里靠 :checked 触发状态，再用 ~（通用兄弟选择器）向后影响左侧星星——但注意顺序：HTML 中星星必须从高分到低分排列（star5 在前，star1 在后），再配合 direction: rtl 或 flex-direction: row-reverse 实现视觉上“从左到右点亮”。
- 写法示例：
input[value="4"]:checked ~ label会选中 value=4 的 radio 后面所有label，所以必须反序写 HTML - hover 效果同理：
label:hover ~ label, label:hover配合input:checked ~ label可实现悬停预览、点击锁定双重反馈 - 别漏掉
input:focus + label，给键盘用户加焦点样式（比如外框或阴影）
JS 怎么安全读取和锁定分数
交互逻辑核心就一句：只在 change 事件中、且 e.target.checked === true 时记录值。其他情况一律忽略。
- 监听
change，不是click——避免重复触发，也兼容键盘空格选中 - 判断
e.target.checked是必须的，因为已选中的 radio 再点一次会触发change，但此时checked是false - 读取分数用：
document.querySelector('input[name="rating"]:checked')?.value，带可选链防报错 - 提交后若需禁用再次修改，应设
fieldset.disabled = true，而不是给每个 input 加disabled——前者保持语义，后者会清空当前选中
移动端点击不准、拖动滑块卡顿怎么办
真机测试常暴露两个坑：热区太小导致点不中，以及自定义滑块在 iOS 上拖不动。
- 每个
label必须设display: inline-block+padding: 8px，确保点击热区 ≥ 44×44px（iOS 最小推荐尺寸） - 如果用
input[type="range"]，务必加style="touch-action: manipulation;"到input元素本身，不是外层容器 - 禁用
user-select: none，否则长按可能触发文字选择，干扰评分操作 - 别在外层
div上绑touchstart，它会劫持原生滑块的 touch 流，导致拖动失效
最易被忽略的是：初始化时若要默认显示 4 星，不能只写 <input value="4" checked>，必须确保同名其他 radio 没有 checked 属性——手写 HTML 容易漏删，用 JS 动态设置更稳妥：document.querySelector('input[value="4"]').checked = true。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
