纯 css 实现五星评分应使用 input[type="radio"] + label 结构而非 mask，因 mask 无法响应点击、不支持状态切换和 :checked；font-awesome 可替代 unicode，但需注意字体加载、半星处理及 pointer-events 设置。
纯 CSS 实现可交互五星评分，mask 不是合适选择——它只能做静态裁剪，无法响应点击、不支持状态切换、也不兼容 :checked 伪类；真正实用且语义正确的方案，是用 font-awesome 或 Unicode 字符 + input[type="radio"] 结构，靠 CSS 控制高亮逻辑。
为什么不能用 mask 做评分星星
mask 是图像遮罩工具，适用于图标裁剪、渐变过渡等视觉效果，但评分组件的核心需求是「状态持久化」和「用户意图捕获」。用 mask 拼出五颗星后，你无法：
- 区分哪颗被点击（没有事件目标绑定能力）
- 让第 3 颗星选中时，前 3 颗都高亮（
mask无法条件渲染） - 提交表单时自动带出 value（
mask不产生可提交的表单控件） - 支持键盘 tab + space 操作（无 focusable 元素）
用 font-awesome 替代 Unicode 的实际影响
使用 font-awesome 图标（如 <i class="fa fa-star"></i>）比直接写 ★ 更可控，但要注意三点：
- 必须加载完整字体文件或 SVG 版本，否则 fallback 为空白（推荐用
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css");） -
fa-star默认是空心，fa-star-half-stroke和fa-star才能支持半星；纯 CSS 无法动态生成半星，得靠 JS 计算并切换 class - 若用伪元素
::before插入图标，要确保pointer-events: none没加在父容器上，否则点击穿透失败
input[type="radio"] + label 结构的关键写法
这是目前唯一能在无 JS 下完成「点击即生效 + 键盘可操作 + 表单可提交」的 HTML 方案。正确 DOM 顺序和 CSS 选择器组合决定成败：
- 把
input放在label前面（input#star3 + label[for="star3"]），而不是包裹进去——否则:checked ~ label会失效 - 隐藏
input必须用position: absolute; opacity: 0;，禁用display: none（破坏可访问性） - 高亮逻辑写成：
input[value="3"]:checked ~ label, input[value="3"]:checked + label，再配合逆序排列（star5 → star1），才能让“选 3”时前 3 颗都亮 - 悬停效果单独写：
.star-rating label:hover, .star-rating label:hover ~ label，避免和 :checked 冲突
容易被忽略的兼容性细节
看似简单的五星评分，在 Safari、旧版 Edge 或屏幕阅读器下常出问题：
- 某些安卓 WebView 对
:checked ~ label支持不全，建议加一层label[for]显式绑定，而非依赖兄弟选择器 - 如果页面有多个评分组件，
name属性必须唯一（比如name="rating-1"、name="rating-2"），否则互相干扰 - 用 JS 初始化默认值时，别只改
labelclass，一定要同步设置input.checked = true，否则表单提交拿不到值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
