纯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。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
