伪类评星组件必须用:checked+纯CSS实现，依赖表单控件真实状态记录评分；DOM顺序须为input→label交替排列，用input[value="n"]:checked~label点亮前n颗星；需兼顾无障碍（aria-label、tabindex、focus样式）、移动端热区（≥44×44px）及兼容性。
伪类评星组件必须用 :checked + <input type="radio">
纯CSS实现评星，核心不是靠:hover或:nth-child模拟交互，而是依赖表单控件的真实状态。用<input type="radio">配合:checked伪类才能记住用户选择——否则鼠标移开就丢分。所有“纯样式”但没用input的方案，本质只是悬停预览，无法持久记录。
常见错误是直接对<span></span>或<i></i>加:hover，结果点击无反馈、刷新丢失、无法读取值、无障碍支持为零。
实操建议：
- 每个星星对应一个
<input type="radio">，name相同，value为1–5 - 用
position: absolute把input藏掉（不推荐display: none，会破坏可访问性） - 用
label[for]或把input包在label里，确保点击文字/图标都能触发 - 星星图标建议用系统字体（如
★）或font-icon，避免图片加载失败导致空白
用 ~ 选择器实现“点亮前面所有星”的效果
选中第3颗星后，要让第1、2、3颗都变黄，不能只改当前元素。CSS里没有“向前兄弟”选择器，但可以靠DOM顺序+~（后续兄弟）反向构造：把input放在最前面，星星label按1→5顺序排在后面，再用input:checked ~ label匹配所有后续label，再用input:nth-of-type(3):checked ~ label限定范围。
立即学习“前端免费学习笔记（深入）”；
关键点：
- DOM顺序必须是：
input[value="1"]→label[for="1"]→input[value="2"]→label[for="2"]…… 否则~不生效 - 要用
input[value="3"]:checked ~ label，而不是input:checked ~ label，否则选中任意星都会点亮全部 - 每颗星的
label需带for属性指向对应input的id，保证语义和点击穿透
兼容性与可访问性绕不开 aria-label 和 focus 样式
仅靠视觉变化不够：屏幕阅读器看不到“已选3星”，键盘用户按Tab无法聚焦到星星上。不处理这些，组件在WCAG 2.1下直接不达标。
必须做的几件事：
- 给每个
input加aria-label="评分3星"，值随value动态变化 - 给
label加tabindex="0"并写:focus样式（比如加outline），否则键盘无法操作 - 禁用
user-select: none，否则iOS Safari双击可能触发文本选中干扰点击 - 避免用
transform: scale()做悬停放大——部分Android浏览器会触发重绘异常，改用font-size更稳
响应式下别硬撑5颗星，用 min-width 控制最小可点区域
移动端手指点不准，如果星星宽高只有16px，误触率极高。CSS里不能只调font-size，得保障点击热区至少44×44px（苹果人机指南要求）。
推荐写法：
- 给包裹容器设
font-size: 20px，星星用em单位（如font-size: 1.2em） - 每个
label设min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; - 用
@media (max-width: 480px)把整体font-size提到24px，比缩放更可靠 - 禁用
touch-action: manipulation——它会阻止双指缩放，但某些安卓版本会导致点击延迟
真正难的不是画出五颗星，而是让它们在VoiceOver里报出正确分数、在Pixel手机上不抖动、在IE11里不崩——这些细节堆起来，才叫“可用”。
