纯css实现鼠标悬停星星高亮需将星星从右往左排列（第5颗最左），配合input[type="radio"]前置、label包裹及:hover+~相邻兄弟选择器；点击后保持选中需结合:checked状态与显式class控制左右星星样式。
怎么用纯 CSS 实现鼠标悬停时星星高亮？
关键不是靠 JS 控制，而是用 :hover + 相邻兄弟选择器（~）配合 input[type="radio"] 隐藏控件。HTML 结构必须从右往左排星（即第 5 颗星在最左），否则 ~ 无法选中左侧星星。常见错误是把星星按 1→5 顺序写，结果悬停第 3 颗时只有它和右边亮，左边不亮。
- 每颗星包裹在
label 里，for 指向对应 input 的 id
-
input 必须放在对应 label 前面，且同级
- 星星图标用 Unicode ✩ 或 SVG，推荐用
★（实心）+ ☆（空心），避免字体加载失败导致空白
- 悬停时触发的是
label:hover ~ label，所以顺序和位置关系必须严格
<div class="rating">
<input type="radio" name="rate" id="star5" value="5"><label for="star5">★</label>
<input type="radio" name="rate" id="star4" value="4"><label for="star4">★</label>
<input type="radio" name="rate" id="star3" value="3"><label for="star3">★</label>
<input type="radio" name="rate" id="star2" value="2"><label for="star2">★</label>
<input type="radio" name="rate" id="star1" value="1"><label for="star1">★</label>
</div>
点击后怎么保持选中状态的高亮？
仅靠 :hover 不够，得靠 :checked 状态联动。核心逻辑是：当某颗星对应的 input 被选中，它和它左边所有 label 都要变实心。由于结构是从右往左排，可以用 input:checked ~ label 向后选中，但“向左”部分得靠每个 input 自身的 :checked + 它前面的 label 组合。
- 不能只写一条通用规则，必须为每颗星单独写
input#starN:checked ~ label + input#starN:checked + label 等组合
- 更稳妥的做法是给每颗星加 class（如
star-1 到 star-5），然后用 input#star3:checked ~ .star-3, input#star3:checked ~ .star-2, ... 显式控制
- 如果用 SVG 替代 Unicode，记得给
fill 设置不同颜色，并在 :checked 时统一改 fill，避免字体渲染差异
为什么移动端点击不准？怎么修复？
原生 input[type="radio"] 默认尺寸极小，iOS 和 Android 上点击热区不足，用户点到星图标却没触发。这不是样式问题，是可点击区域太小。
- 必须给
label 设置 display: inline-block 和足够 padding（至少 8px）
- 加上
cursor: pointer 提示可交互
- 移动端需禁用缩放干扰：
input 加 width: 0; height: 0; opacity: 0;，而不是 display: none 或 visibility: hidden（后者会破坏可访问性）
- Safari 对
~ 选择器有缓存 bug，偶尔需强制重绘，可在 JS 中简单触发改样式（如切换 class），但纯 CSS 方案优先用 label 包裹整个图标区域
要不要用 JavaScript 补充？什么情况值得加？
纯 CSS 能覆盖 90% 场景，但以下情况 JS 是刚需：
- 需要实时显示评分数值（如悬停显示 “4.2 分”）
- 要支持半星（比如 hover 到第 3 颗星中间时亮 2.5 颗）
- 用户未点击时，想根据已有数据预设默认值（CSS 无法读取 JS 变量）
- 需兼容 IE11（
~ 选择器支持但 radio 伪类有 bug，得降级为 JS 绑定）
label 里，for 指向对应 input 的 id
input 必须放在对应 label 前面，且同级★（实心）+ ☆（空心），避免字体加载失败导致空白label:hover ~ label，所以顺序和位置关系必须严格:hover 不够，得靠 :checked 状态联动。核心逻辑是：当某颗星对应的 input 被选中，它和它左边所有 label 都要变实心。由于结构是从右往左排，可以用 input:checked ~ label 向后选中，但“向左”部分得靠每个 input 自身的 :checked + 它前面的 label 组合。
- 不能只写一条通用规则，必须为每颗星单独写
input#starN:checked ~ label+input#starN:checked + label等组合 - 更稳妥的做法是给每颗星加 class（如
star-1到star-5），然后用input#star3:checked ~ .star-3, input#star3:checked ~ .star-2, ...显式控制 - 如果用 SVG 替代 Unicode，记得给
fill设置不同颜色，并在:checked时统一改 fill，避免字体渲染差异
为什么移动端点击不准？怎么修复？
原生 input[type="radio"] 默认尺寸极小，iOS 和 Android 上点击热区不足，用户点到星图标却没触发。这不是样式问题，是可点击区域太小。
- 必须给
label 设置 display: inline-block 和足够 padding（至少 8px）
- 加上
cursor: pointer 提示可交互
- 移动端需禁用缩放干扰：
input 加 width: 0; height: 0; opacity: 0;，而不是 display: none 或 visibility: hidden（后者会破坏可访问性）
- Safari 对
~ 选择器有缓存 bug，偶尔需强制重绘，可在 JS 中简单触发改样式（如切换 class），但纯 CSS 方案优先用 label 包裹整个图标区域
要不要用 JavaScript 补充？什么情况值得加？
纯 CSS 能覆盖 90% 场景，但以下情况 JS 是刚需：
- 需要实时显示评分数值（如悬停显示 “4.2 分”）
- 要支持半星（比如 hover 到第 3 颗星中间时亮 2.5 颗）
- 用户未点击时，想根据已有数据预设默认值（CSS 无法读取 JS 变量）
- 需兼容 IE11（
~ 选择器支持但 radio 伪类有 bug，得降级为 JS 绑定）
label 设置 display: inline-block 和足够 padding（至少 8px）cursor: pointer 提示可交互input 加 width: 0; height: 0; opacity: 0;，而不是 display: none 或 visibility: hidden（后者会破坏可访问性）~ 选择器有缓存 bug，偶尔需强制重绘，可在 JS 中简单触发改样式（如切换 class），但纯 CSS 方案优先用 label 包裹整个图标区域- 需要实时显示评分数值（如悬停显示 “4.2 分”）
- 要支持半星（比如 hover 到第 3 颗星中间时亮 2.5 颗）
- 用户未点击时，想根据已有数据预设默认值（CSS 无法读取 JS 变量）
- 需兼容 IE11（
~选择器支持但 radio 伪类有 bug，得降级为 JS 绑定）
半星实现本质是两个层叠的星星：底层用 clip-path 或 mask 截断，上层用透明度过渡，但各浏览器对 clip-path 的 SVG path 支持不一，容易错位。真要用，建议直接上轻量库如 rateyo 或手写 canvas 渲染，别硬刚 CSS。
真实项目里，最常被忽略的是键盘可访问性——没加 tabindex 和 aria-label，屏幕阅读器用户根本不知道这是评分组件。哪怕纯展示，也该补上 role="img" aria-label="评分 4 星"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
