HTML实现星级评分的纯结构写法介绍

• 每颗星必须对应一个 <input type="radio">，name 相同，value 为 1–5
• 必须紧跟在对应 <input> 后面（顺序不能错），才能用 input:checked + label 触发样式
• 把 <input> 设为 position: absolute; clip: rect(0 0 0 0); 隐藏但保留可访问性，别用 display: none 或 visibility: hidden —— 这会让它彻底失效
• label 里放 ★ 符号或伪元素，用 font-size 控制大小，别用图片，否则缩放或高对比度模式下易出问题

为什么 label 一定要紧挨着 input？

因为 CSS 里只能用 +（相邻兄弟）或 ~（后续兄弟）选择器去匹配已选中的 input 后面的 label。如果中间插了其他标签，或者顺序颠倒，input:checked + label 就完全不生效 —— 你点半天，星星根本不亮。

• ✅ 正确：<input id="s1" type="radio" name="rate">★
• ❌ 错误：★<input id="s1" type="radio" name="rate">（顺序反了）
• ❌ 错误：<input id="s1">提示★（中间有 ，+ 失效）

用 :checked ~ label 实现「悬停时高亮前面所有星」

原生单选框不支持 hover 时“点亮前几颗”，必须用 ~（后续兄弟选择器）配合结构设计：把所有 <input> 放最前面， 全部跟在后面，顺序为 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> 在