用 radio 实现星星评分需隐藏 input 并倒序 DOM 排列，通过 :checked ~ label 控制前序星星高亮，配合 Unicode 星号、足够点击区域及 touch-action 保障多端稳定交互。
用 input[type="radio"] 实现可点击的星星评分，关键在隐藏原生控件 + 用 ::before/::after 重绘
直接暴露 input[type="radio"] 的默认样式没法做星星，必须先用 appearance: none 或 opacity: 0 隐藏它，再借助其兄弟元素（比如 label）或父容器绑定伪元素。否则点击无效、状态不同步。
常见错误是只改了 label 样式，但没把 input 置于可点击区域上方，或者忘了加 for 属性或嵌套关系，导致选中态不触发。
-
input必须有name属性，且所有同组星星共用一个name，才能互斥选择 - 推荐结构：把
input放在label内部，避免依赖for和id匹配失败 - 伪元素必须作用在
label上（不能直接作用在input），因为input不支持::before/::after
:checked + ~ 选择器控制已选及更早星星高亮
要实现“点第三颗星，前三个都亮”，不能只靠 :checked 自身，得用相邻兄弟选择器 ~ 向后影响，但这里需要“向前影响”——所以要把 DOM 顺序反过来写：第五颗星放在最前，第一颗在最后。这样选中第 n 颗时，用 :checked ~ label 就能命中它前面的所有 label。
示例结构（注意顺序倒置）：
立即学习“前端免费学习笔记（深入）”；
<input type="radio" name="rating" id="star5" value="5"><label for="star5"></label> <input type="radio" name="rating" id="star4" value="4"><label for="star4"></label> <input type="radio" name="rating" id="star3" value="3"><label for="star3"></label> <input type="radio" name="rating" id="star2" value="2"><label for="star2"></label> <input type="radio" name="rating" id="star1" value="1"><label for="star1"></label>
对应 CSS：
input[type="radio"] { display: none; }
label { cursor: pointer; }
label::before { content: "☆"; font-size: 24px; }
input#star5:checked ~ label[for="star5"]::before,
input#star5:checked ~ label[for="star4"]::before,
input#star5:checked ~ label[for="star3"]::before,
input#star5:checked ~ label[for="star2"]::before,
input#star5:checked ~ label[for="star1"]::before,
input#star4:checked ~ label[for="star4"]::before,
input#star4:checked ~ label[for="star3"]::before,
input#star4:checked ~ label[for="star2"]::before,
input#star4:checked ~ label[for="star1"]::before,
/* ……依此类推 */更简洁写法是给每个 label 加 class，比如 class="star-1"，然后用属性选择器批量匹配。
用 font-family: "Segoe UI Symbol" 或 Unicode 字符保底显示，别硬套图标字体
很多人用 iconfont 或 FontAwesome，但一来要额外加载资源，二来在无网络或字体加载失败时直接空白。用系统自带字符更稳：
- 空心星：
"☆"（U+2606） - 实心星：
"★"（U+2605） - 半星（需额外处理）：
"⯨"（U+2BE8）或组合伪元素裁剪，但纯 CSS 半星兼容性差，建议 JS 辅助或 SVG
设置 font-family 时加兜底： font-family: "Segoe UI Symbol", "Apple Color Emoji", sans-serif;，避免某些系统 fallback 到不支持 Unicode 符号的字体。
移动端点击区域小、误触多，label 必须撑满并加 touch-action: manipulation
原生 radio 的点击热区极小，尤其在 iOS 上容易点不中。解决方案是让 label 宽高足够（比如 min-width: 40px; min-height: 40px;），并用 display: inline-block 或 flex 布局保证可点击范围。
另外两个关键点：
- 给
label加touch-action: manipulation，防止 iOS Safari 因延迟 300ms 点击而误判为滑动 - 避免在
label上设pointer-events: none或透明遮罩层，否则点击失效 - 如果用 Flex 布局排星星，记得设
gap而不是margin，避免因 margin 折叠导致点击区域错位
真正难的不是画出五颗星，而是让每颗星在各种设备上都能稳定响应、状态准确、不闪跳、不卡顿。尤其是 label 和 input 的绑定关系、DOM 顺序、伪元素渲染时机这三处，稍有疏忽就会出现“点了没反应”或“点了变两颗星”的问题。
