纯HTML星级评分需用5个同name的radio按钮+对应label，input必须前置且隐藏（clip而非display:none），label紧随其后以支持:checked+label样式联动及可访问性。
用 <input type="radio"> 实现可点击的星级评分
纯 HTML 星级评分本质是「隐藏单选按钮 + 用相邻兄弟选择器控制 label 样式」，核心靠 :checked 状态联动。不能只写 <div> 堆星星，那样无法获取值、不支持键盘操作、屏幕阅读器也读不到。
<ul>
<li>每颗星必须对应一个 <code><input type="radio">，name 相同，value 为 1–5
<label></label> 必须紧跟在对应 <input> 后面（顺序不能错），才能用 input:checked + label 触发样式<input> 设为 position: absolute; clip: rect(0 0 0 0); 隐藏但保留可访问性，别用 display: none 或 visibility: hidden —— 这会让它彻底失效font-size 控制大小，别用图片，否则缩放或高对比度模式下易出问题为什么 label 一定要紧挨着 input？
因为 CSS 里只能用 +（相邻兄弟）或 ~（后续兄弟）选择器去匹配已选中的 input 后面的 label。如果中间插了其他标签，或者顺序颠倒，input:checked + label 就完全不生效 —— 你点半天，星星根本不亮。
- ✅ 正确：
<input id="s1" type="radio" name="rate"><label for="s1">★</label> - ❌ 错误：
<label for="s1">★</label><input id="s1" type="radio" name="rate">（顺序反了） - ❌ 错误：
<input id="s1"><span>提示</span><label for="s1">★</label>（中间有<span></span>，+失效）
用 :checked ~ label 实现「悬停时高亮前面所有星」
原生单选框不支持 hover 时“点亮前几颗”，必须用 ~（后续兄弟选择器）配合结构设计：把所有 <input> 放最前面，<label></label> 全部跟在后面，顺序为 input1 → input2 → … → label1 → label2 → …
- 这样写
input:nth-of-type(3):hover ~ label才能同时影响 label1、label2、label3 - 但注意：这种结构下，用户点 label3 实际选中的是 input3，而 input3 后面的 label 只有 label4、label5 —— 所以必须让每个 label 对应自己前面的 input，靠
for和id绑定，不能只靠位置 - 移动端上 hover 无效，得补一层 JS 监听
touchstart或用:focus-within做降级
表单提交时怎么拿到评分值？
和普通单选框完全一样：只要 <input> 在 <form></form> 内、有 name、且被选中，提交时就会带 name=value 参数。后端收到的就是数字字符串，比如 rate=4。
立即学习“前端免费学习笔记（深入）”；
- 别忘了加
required属性强制选择，否则可能提交空值 - 如果用 JS 读值，直接取
document.querySelector('input[name="rate"]:checked')?.value，别遍历所有 input - 服务端别假设值一定是 "1"–"5" 字符串，要校验范围，防止恶意提交
rate=999
for/id 绑定和隐藏 input 的方式。很多人图省事用 display: none，结果表单一提交就丢数据，还查不出原因。
