用纯HTML+CSS实现可点击五星评分，需用5个隐藏的radio输入框（value 1-5）配合对应label，利用:checked伪类和相邻选择器控制高亮，确保语义化、可访问性及键盘操作支持。
怎么用纯 HTML + CSS 实现可点击的五星评分
不能只靠 ★ 字符堆砌，得让每个星星可独立点击、能高亮、还能记住选中状态。核心是利用 input[type="radio"] 隐藏原生控件，再用 label 和相邻兄弟选择器（~）触发样式变化。
常见错误：直接用 div 套 span 写死“5颗星”，结果无法获取用户选择、不支持键盘操作、屏幕阅读器读不出来。
- 每颗星必须对应一个带
name的input[type="radio"]，value从 1 到 5 -
label的for属性要严格匹配input的id - 隐藏
input用position: absolute; left: -9999px，别用display: none（会脱离可访问性树） - 星星图标推荐用 Unicode
☆（空心）和★（实心），或 SVG，避免字体加载失败导致空白
为什么用 :checked ~ 而不是 :hover 模拟评分
:hover 只能做悬停效果，无法持久记录用户选择；而真实评分场景需要提交表单或存入 JS 变量。:checked 是唯一能准确捕获“最终选中值”的 CSS 状态。
关键逻辑：当第 3 颗星被选中（即 input[value="3"] 为 :checked），它后面的兄弟 label 不会变亮，但前面的（1、2）和它自己（3）要亮——所以得反向写：用 input[value="3"]:checked ~ label 不行，得用 input[value="3"]:checked + label 和后续相邻选择器组合。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确写法是给每个
label设置for指向对应input，再用input[value="N"]:checked ~ label[for="star-N"]不现实；更可靠的是把input放在label内部，或用input + label结构 - 推荐结构：
input#star3 + label[for="star3"]，然后写input#star3:checked ~ label让所有前面的 label 也亮（需调整 DOM 顺序） - 实际更稳的做法：把 5 个
input从 5→1 逆序排列，这样input[value="3"]:checked ~ label就能覆盖前 3 颗星
change 事件监听不到点击？检查是否用了 pointer-events: none
为了用 CSS 控制星星样式，有人会给 input 或 label 加 pointer-events: none，结果点击完全没反应——因为事件被拦截了。
真正该加 pointer-events: none 的是作为视觉装饰的伪元素（比如 ::before 显示星星），而不是包裹 input 的容器。
- 确保
input本身有足够面积接收点击（哪怕透明），不要被其他元素遮挡 - 如果用 JS 绑定
change，注意事件委托时目标可能是label，需用e.target.control || e.target获取真实input - 移动端需加
cursor: pointer和touch-action: manipulation避免 300ms 延迟
怎么让已评分的星星在页面加载后保持高亮
如果后端返回了当前评分（比如 4），不能靠 JS 动态设 checked 再触发样式——CSS 会立刻生效，但得确保初始 HTML 就带 checked 属性，否则 SSR 或首屏渲染会闪动。
服务端渲染或模板中直接输出：<input type="radio" id="star4" name="rating" value="4" checked>。纯前端则需在 DOM ready 后用 JS 设置并触发一次 dispatchEvent(new Event('change'))。
- 别用
input.checked = true后不触发事件，表单库或验证逻辑可能收不到更新 - 如果用 Vue/React，优先走响应式绑定，而非手动操作 DOM
- 注意 Safari 对
:checked样式更新有缓存行为，加input { will-change: checked }可缓解
最易被忽略的是语义化和可访问性：没 aria-label 的评分组件，视障用户根本不知道这是干啥的；没 legend 包裹的 fieldset，屏幕阅读器可能读成“五个独立单选按钮”。真要上线，至少补上 <fieldset><legend>您的评分</legend>…</fieldset>。
