可以使用纯css实现星级评分组件的交互效果，其核心在于利用html结构与css伪类状态控制点击和悬停效果。具体步骤如下：1. 使用隐藏的单选按钮（radio）配合label实现点击逻辑；2. 通过css隐藏原生radio按钮并自定义星星样式；3. 利用:checked伪类改变选中项及其前面项的样式；4. 使用:hover伪类实现悬停高亮预览；5. 若需精准控制悬停范围，可将元素顺序反向排列以配合兄弟选择器；6. 注意不支持动态提交、移动端hover失效及取消评分等功能限制。该方法适合快速构建轻量级评分组件且无需javascript的场景。
要实现一个基于 CSS 选择器的星级评分组件交互，其实不需要写一行 JavaScript。只要巧妙利用 HTML 的结构和 CSS 的特性，就能做出点击评分、悬停高亮等效果。关键在于理解标签之间的关系和伪类状态的变化。
基本结构与布局
实现星级评分的第一步是构建基础结构。通常我们会使用一组单选按钮（radio）来代表每一颗星，并隐藏这些按钮，然后通过其旁边的标签（label）来进行视觉呈现。
这种结构的好处是：
立即学习“前端免费学习笔记（深入）”；
- 单选按钮天然支持“只选一个”的逻辑。
- label 可以绑定到对应的 radio 按钮上，点击 label 就等于点击按钮。
- 我们可以完全隐藏原生的 radio 按钮，用自定义样式代替。
利用 CSS 实现点击与悬停效果
接下来就是用 CSS 控制星星的状态。主要思路是：
- 隐藏原生的 radio 按钮。
- 当某个 radio 被选中时，改变对应 label 和它前面所有 label 的样式。
- 利用
:hover状态实现鼠标悬停时的预览效果。
.rating input {
display: none;
}
.rating label {
font-size: 2rem;
color: #ccc;
cursor: pointer;
}
.rating input:checked ~ label {
color: gold;
}
.rating label:hover,
.rating label:hover ~ label {
color: gold;
}这段代码的关键点：
- 使用了属性选择器
input:checked来判断是否被选中。 -
~是通用兄弟选择器，用来影响后面的 label。 - 悬停时用
hover改变颜色，模拟评分预览。
不过这里有个小问题：如果用户悬停在中间一颗星上，后面所有的星都会变成金色。这可能不是我们想要的效果。我们可以借助反向排列元素的方式解决这个问题。
更精准的悬停控制（进阶技巧）
为了让悬停只影响当前星及前面的星，可以将 HTML 中的 star 元素从 5 星排到 1 星，而不是反过来。这样，CSS 的兄弟选择器就可以更自然地工作。
HTML 结构保持不变，只是顺序调换一下：
...
然后修改 CSS：
.rating label:hover,
.rating label:hover ~ label {
color: gold;
}
.rating input:checked ~ label {
color: gold;
}这样一来，悬停在第 3 颗星时，只有前 3 颗星会被点亮，后两颗保持灰色。
注意事项与优化建议
虽然纯 CSS 实现很简洁，但有几个地方需要注意：
- 不支持动态数据提交，比如需要把评分结果传给服务器时，必须配合 JS 或表单提交。
- 移动端兼容性较好，但在部分浏览器中 hover 效果可能会失效（例如 iOS 上点击不会触发 hover）。
- 如果你希望用户点击后还能取消评分，CSS 实现就不够用了，需要 JS 辅助。
如果你的应用场景允许不依赖 JS，那这套方案就很适合快速搭建一个轻量级评分组件。
基本上就这些。
