必须使用input[type="radio"]配合label和CSS兄弟选择器实现，确保可访问性、键盘导航及表单提交；禁用display:none隐藏radio，改用position:absolute;clip:rect(0 0 0 0)；悬停与选中状态需通过:checked ~ label和:hover ~ label叠加控制；fieldset包裹并配legend满足WCAG标准。
用纯 HTML + CSS 实现可点击的星星评分，不需要 JS 也能工作
能，但仅限「只读」或「单次选择」场景。真正的交互式评分（比如鼠标悬停预览、点击后保持、支持键盘操作）必须依赖 input[type="radio"] 配合 label 和 CSS 伪类，否则无法捕获用户意图且不满足无障碍要求。
常见错误是直接用 div + 点击事件模拟，结果：无法用 Tab 键聚焦、屏幕阅读器读不出当前值、移动端点按不一致、表单提交时拿不到值。
- 必须用
input[type="radio"]组，每个星星对应一个带value的选项 - 所有 radio 必须有相同
name，确保单选互斥 - 用
label[for]或把input包在label里，才能点击星星触发选中 - 隐藏原生 radio（
opacity: 0; position: absolute;），再用::before或背景图绘制星星
CSS 星星样式怎么让 hover 和选中状态正确联动
关键在利用兄弟选择器 ~ 和属性选择器匹配已选中的 radio，再控制后续 label 的样式。不能只靠 :hover，否则离开时星星会“闪退”。
例如：当用户把鼠标移到第 3 颗星上，要让前 3 颗都高亮；点下后，第 3 颗及之前保持高亮——这需要两套规则叠加：
立即学习“前端免费学习笔记（深入）”；
-
input[value="3"]:checked ~ label：选中 value=3 后，影响它之后所有 label（用于清空后续高亮） -
input[value="3"]:checked + label, input[value="3"]:checked + label + label, ...：显式列出前 N 个 label（太啰嗦） - 更可靠做法：给每个
label设置for指向对应 radio，并用input[id="star3"]:checked ~ label[for="star1"], input[id="star3"]:checked ~ label[for="star2"], ... - 实际推荐用相邻兄弟 + 属性选择器组合：
input[value="1"]:checked ~ label, input[value="2"]:checked ~ label, ...配合label:hover, label:hover ~ label实现悬停扩散
为什么用 fieldset 包裹 radio 组很重要
不只是语义化问题。没有 fieldset 时，部分浏览器（尤其是 Safari）在表单重置（type="reset"）时可能无法正确还原 radio 的初始状态；更重要的是，legend 可作为评分组件的可访问标签，被屏幕阅读器自动关联。
-
fieldset默认带边框和外边距，用border: none; padding: 0; margin: 0;重置即可 - 必须配
legend，哪怕视觉上隐藏（position: absolute; clip: rect(1px, 1px, 1px, 1px);），否则 WCAG 4.1.2 失败 - 如果评分是必填项，
legend文本需明确提示，如 “评分（必选）”
移动端点击不准、iOS Safari 不响应 click 怎么办
根本原因是 iOS Safari 对小于 44×44px 的可点击区域有最小尺寸限制，且默认忽略 label 上的 click 事件绑定（如果用了 JS）。纯 CSS 方案下，只需确保点击热区足够大。
- 给
label设置min-width: 44px; min-height: 44px;，内部星星图标用font-size或background-size缩放，别压缩容器本身 - 避免用
transform: scale()缩小 label，这会缩小热区 - 禁用
-webkit-tap-highlight-color: transparent;消除点击灰斑，但别删掉cursor: pointer，否则 Android Chrome 可能不识别可点击态 - 真遇到 click 不触发？检查是否父容器有
pointer-events: none，或 label 被其他元素（如伪元素）遮挡
fieldset 的可访问性约束和 iOS 热区尺寸——写完功能后在真机上用手指点一遍，比任何模拟器都管用。 
