纯 HTML + CSS 星星评分条可通过 radio 按钮隐式绑定与 :checked 伪类实现无 JS 交互，需反向 DOM 排序、Unicode 星号、扩大热区并保留语义化 label 以保障可访问性。
用纯 HTML + CSS 实现可点击的星星评分条
不需要 JavaScript 就能做出基础交互，关键在 <input type="radio"> 的隐式绑定和 :checked 伪类。浏览器原生支持，兼容性好，加载快，适合表单提交场景。
常见错误是直接用 <div> 拼星星再加 JS 监听——既增加体积，又容易漏掉键盘焦点、空格/回车触发等可访问性细节。
- 5 颗星必须用同一组
name的<input type="radio">，值从 1 到 5 - 每颗星用
<label>包裹对应input，并设置for或嵌套结构，点击标签即选中 radio - 用
input[type="radio"]:checked ~ label或相邻兄弟选择器控制已选及左侧星星样式（注意顺序） - 默认隐藏
input（position: absolute; opacity: 0），用label::before绘制星星图标
CSS 星星图标用 Unicode 还是 SVG？
初学者优先用 Unicode ★（实心）和 ☆（空心），零依赖、易调试、字体 fallback 可控。SVG 更灵活但需处理尺寸对齐和颜色继承问题。
别写 content: "★"; 然后发现乱码——确保 HTML 声明了 UTF-8：<meta charset="UTF-8">。另外，部分系统字体（如 Windows 的 Segoe UI）对这些符号渲染偏小，建议加 font-size 和 line-height 统一控制。
立即学习“前端免费学习笔记（深入）”；
- Unicode 方案：用
label::before { content: "\2605"; }（十六进制更稳） - 避免用图片，否则响应式缩放易模糊，且无法通过 CSS 改颜色
- 如果必须用 SVG，把它内联为
background-image: url("data:image/svg+xml,...")，省去 HTTP 请求
为什么点击第 3 颗星，前 3 颗都亮，但第 4、5 颗不响应？
这是 DOM 顺序和 CSS 选择器限制导致的。CSS 无法“向上”选择父级或前面的兄弟元素，所以标准做法是把 input 放在 label 前面，并用 input:checked ~ label 选中它之后的所有 label，再配合 input:checked + label 逐个覆盖右侧状态。
更稳妥的做法是反向排列 DOM：第 5 颗星的 input 写在最前，第 1 颗写在最后，这样 :checked ~ label 就能自然覆盖“≤当前值”的所有星星。
- DOM 顺序应为：
input[value="5"]→label[for="5"]→input[value="4"]→label[for="4"]…… - 对应 CSS：
input[value="5"]:checked ~ label, input[value="4"]:checked ~ label, ...不用写全，用通配即可 - 别依赖
:hover模拟高亮——用户没悬停时无法预览效果，也不符合表单语义
移动端点不准、iOS Safari 不响应点击？
本质是 iOS Safari 对小于 44×44px 的可点击区域有最小触控限制，而默认 Unicode 星星太小。不是 bug，是规范行为。
解决方式不是加 JS，而是用 CSS 扩大点击热区：给 label 设 min-width、padding，同时保持视觉大小不变（用 transform: scale() 缩小内容）。这样热区够大，UI 也不变形。
- 给每个
label加display: inline-block; min-width: 44px; height: 44px; - 星星图标用
font-size: 24px，再用transform: scale(0.8)微调视觉比例 - 务必加
cursor: pointer和-webkit-tap-highlight-color: transparent提升手感 - 测试时真机连 Safari 开发者工具，别只靠 Chrome 模拟器
真正难的是让键盘用户也能操作：按 Tab 进入、空格/回车确认、方向键切换。这需要 radio 组天然支持，但很多人删掉了 label 或用了 div 模拟，就彻底断掉了可访问链路。
