纯HTML+CSS星级评分需用fieldset包裹radio，label绑定隐藏input，CSS伪类绘制星星并用相邻兄弟选择器控制高亮；半星必须JS计算鼠标位置；文字评价需JS映射value到文案；注意name属性、pointer-events、无障碍aria-label。
怎么用纯HTML+CSS实现可点击的星级评分
不能只靠 <input type="radio"> 或 <input type="range"> 单独搞定——它们默认没视觉反馈，更没有“半星”或“悬停高亮”效果。必须配合CSS伪类和结构控制。
- 用
<fieldset>包裹一组<input type="radio">，确保互斥选择，同时语义正确 - 每个
<input>后紧跟一个<label>，用for属性绑定（或把<input>套进<label>里），点击文字/图标才能触发 - 隐藏原生
<input>（position: absolute; opacity: 0），用::before或背景图绘制星星 - 利用相邻兄弟选择器（
input:checked ~ label）和悬停时的input:hover ~ label控制高亮范围
为什么「半星」在HTML里没法直接靠属性实现
HTML表单控件本身不支持小数级值输入；<input type="range"> 的 step 可设为 0.5，但滑块位置、显示文案、视觉反馈全得自己算——浏览器不会自动渲染半颗星。
- 如果后端只要整数（1–5），就别硬做半星，用
type="radio"更稳 - 真要半星，得用JavaScript监听鼠标位置，动态计算当前hover在哪颗星的哪一半，再手动切换class
- 注意：移动端touch事件坐标精度低，
getBoundingClientRect()+clientX计算容易误判，建议降级为整星
文字评价文案怎么和星级联动更新
不能靠HTML alone完成——<output> 标签虽能响应 <input> 变化，但它只认 value，不会自动翻译成“差劲”“一般”“推荐”这类文案。
- 给每个
<input>设不同value（如value="1"到value="5"） - 用JavaScript监听
change事件，查表映射：{1: "很差", 2: "较差", 3: "一般", 4: "推荐", 5: "强烈推荐"} - 避免用
innerHTML直接拼接，防止XSS；用textContent更新文字区域 - 如果页面禁用JS，就老老实实只留星级+默认提示文案（比如“请选择满意度”），别强求动态文字
常见错误：点击没反应 / 星星不亮 / 移动端点不准
90% 是标签绑定或CSS覆盖问题，不是逻辑写错。
立即学习“前端免费学习笔记（深入）”；
-
<input>没加name属性 → 多个单选框无法互斥，必须统一name="rating" - CSS里写了
pointer-events: none在父容器上 → 整个区域失效，检查<fieldset>或外层<div> - 移动端
touchstart和click冲突 → 加cursor: pointer强制触发300ms延迟优化，或用ontouchstart=""空属性激活 - label用了
display: inline-block但没设vertical-align: top→ 星星上下错位，看起来像点不中
最麻烦的其实是无障碍支持：要加 aria-label 描述当前选项（如 aria-label="选择4星，表示推荐"），否则屏幕阅读器只读“未选中单选按钮”，用户根本不知道这组是干啥的。
