CSS实现星级评分效果详解

你在学习文章相关的知识吗？本文《CSS实现星级评分交互效果》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

可以使用纯CSS实现星级评分组件的交互效果，其核心在于利用HTML结构与CSS伪类状态控制点击和悬停效果。具体步骤如下：1. 使用隐藏的单选按钮（radio）配合label实现点击逻辑；2. 通过CSS隐藏原生radio按钮并自定义星星样式；3. 利用:checked伪类改变选中项及其前面项的样式；4. 使用:hover伪类实现悬停高亮预览；5. 若需精准控制悬停范围，可将元素顺序反向排列以配合兄弟选择器；6. 注意不支持动态提交、移动端hover失效及取消评分等功能限制。该方法适合快速构建轻量级评分组件且无需JavaScript的场景。

要实现一个基于 CSS 选择器的星级评分组件交互，其实不需要写一行 JavaScript。只要巧妙利用 HTML 的结构和 CSS 的特性，就能做出点击评分、悬停高亮等效果。关键在于理解标签之间的关系和伪类状态的变化。

基本结构与布局

实现星级评分的第一步是构建基础结构。通常我们会使用一组单选按钮（radio）来代表每一颗星，并隐藏这些按钮，然后通过其旁边的标签（label）来进行视觉呈现。

<div class="rating">
  &lt;input type=&quot;radio&quot; id=&quot;star5&quot; name=&quot;rating&quot; value=&quot;5&quot;&gt;
  <label for="star5">★</label>

  &lt;input type=&quot;radio&quot; id=&quot;star4&quot; name=&quot;rating&quot; value=&quot;4&quot;&gt;
  <label for="star4">★</label>

  &lt;input type=&quot;radio&quot; id=&quot;star3&quot; name=&quot;rating&quot; value=&quot;3&quot;&gt;
  <label for="star3">★</label>

  &lt;input type=&quot;radio&quot; id=&quot;star2&quot; name=&quot;rating&quot; value=&quot;2&quot;&gt;
  <label for="star2">★</label>

  &lt;input type=&quot;radio&quot; id=&quot;star1&quot; name=&quot;rating&quot; value=&quot;1&quot;&gt;
  <label for="star1">★</label>
</div>

这种结构的好处是：

• 单选按钮天然支持“只选一个”的逻辑。
• 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 结构保持不变，只是顺序调换一下：

&lt;input type=&quot;radio&quot; id=&quot;star5&quot; ...&gt;<label for="star5">...</label>
&lt;input type=&quot;radio&quot; id=&quot;star4&quot; ...&gt;<label for="star4">...</label>
...

然后修改 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，那这套方案就很适合快速搭建一个轻量级评分组件。

基本上就这些。

今天关于《CSS实现星级评分效果详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！