HTML中如何制作纯CSS的星级评分展示

纯CSS星级评分需用input[type="radio"]与label配合，通过:checked状态和~选择器实现点击高亮，input必须同name且逆序排列或合理结构化以支持“点第n颗则前n颗亮”，悬停预览需额外:hover规则，半星等复杂功能需JS补充。

用 input[type="radio"] 配合 label 实现可点击的星级交互

纯 CSS 星级评分不依赖 JS，核心是利用单选按钮的 :checked 状态 + 相邻/子元素选择器控制样式。必须把 input 放在 label 前面（或用 for 关联），否则点击星星无法触发选中。

常见错误：把 input 包在 label 里但顺序反了，或者忘了加 name 属性导致多选而非单选。

• 每个 input 必须有相同 name（如 name="rating"），且 value 为 1–5
• label 的 for 值需严格匹配对应 input 的 id
• 视觉上的星星用伪元素（::before）或字体图标（如 Font Awesome）更可控，避免图片加载失败问题

:checked ~ label 和 :checked + label 的选择器写法差异

星星点亮效果靠「当前选中项及之前所有项」高亮，这取决于 HTML 结构。若 input 和 label 是兄弟节点且顺序排列（input 在前），用 ~ 可以选中后续所有同级 label；若 label 紧跟其后，则 + 更精准、性能略好。

错误示例：input:checked + label::before 只能点亮当前星，无法实现「点第三颗，前三颗都亮」的效果——必须配合 input:checked ~ label 或更通用的「从第一个开始到当前为止」逻辑。

立即学习“前端免费学习笔记（深入）”；

• 推荐结构：所有 input 排在最前，接着是对应顺序的 label，这样 input:nth-of-type(3):checked ~ label 能选中第 3 到第 5 个 label
• 若想支持「悬停预览」（hover 时临时高亮），需额外用 label:hover, label:hover ~ label，但注意它和 :checked 的层叠优先级
• 移动端点击区域小？给 label 设 display: inline-block 并扩大 padding，别只靠伪元素撑开

使用 font-awesome 字体图标时的兼容性与 fallback 处理

直接用 ★（Unicode 实心星）最轻量，但渲染风格不统一；用 Font Awesome 需确保 CDN 加载成功，否则显示方块或空白。不能只依赖 content: "f005"。

容易被忽略的一点：Font Awesome 5+ 默认用 SVG 注入，CSS 方式引入需用 webfonts 版本，并声明 font-family: "Font Awesome 5 Free" 和 font-weight: 900 才能显示实心星。

• 稳妥做法：用 Unicode 星（2605）作 fallback，再叠加字体图标类名，例如 label::before { content: "2605"; font-family: "Font Awesome 5 Free", serif; }
• 避免在 content 里写空格或换行，会导致布局错位
• IE11 不支持某些伪元素动画，如果加了淡入效果，建议用 opacity + transition 而非 transform 动画

只读模式下如何保持样式一致又禁用交互

展示已有评分（比如商品详情页）时，不能让用户误点修改。很多人直接加 disabled，结果整行星星变灰、失去原有配色——因为浏览器对 disabled 的默认样式覆盖了你的 CSS。

正确做法是保留 input 的 :checked 状态，但移除所有 label 的点击响应，并屏蔽 hover 效果。

• 给容器加 class="readonly"，然后写 .readonly label { pointer-events: none; }
• 同时重置 .readonly label:hover::before 样式，避免悬停残留
• 若后端返回的是数字（如 4.2），纯 CSS 无法实现半星——此时必须用 JS 渲染或改用背景图/渐变遮罩模拟，CSS 本身不支持小数精度的 :checked

实际应用中，半星、动态评分、键盘导航支持（tabindex、aria-label）这些需求会让纯 CSS 方案迅速变得脆弱。真要兼顾可访问性和体验，还是得在关键路径上让步加轻量 JS。