利用Unicode字符和CSS实现星级评分，通过HTML标签或radio+label组合创建五星元素，使用:hover和:checked状态配合兄弟选择器~控制悬停与选中样式，以inline-block排列并用transition添加过渡效果，实现无需图片的交互式评分功能。
在CSS中制作简单的评分星星效果，可以通过使用Unicode星号字符、字体图标或背景图片来实现。下面介绍一种常见且简单的方法：利用Unicode字符和CSS样式来创建可交互的星级评分效果。
1. 使用Unicode星星字符
HTML中用五个标签表示每颗星，通过CSS控制鼠标悬停和选中状态下的显示效果。
示例代码：
<div class="star-rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div>
2. 添加基础CSS样式
设置星星默认为灰色，悬停时变为黄色，并使用inline-block让星星横向排列。
立即学习“前端免费学习笔记（深入）”；
星火作家大神
37
星火作家大神是一款面向作家的AI写作工具
37
查看详情
.star-rating {
font-size: 30px;
color: #ddd;
letter-spacing: 5px;
}
.star {
display: inline-block;
cursor: pointer;
transition: color 0.2s;
}
.star:hover,
.star:hover ~ .star {
color: gold;
}
3. 实现点击选中效果（可选）
如果需要记录用户选择的星级，可以用JavaScript简单实现，但仅用CSS可通过:checked配合隐藏radio输入框模拟（需改用label和input）。
修改HTML：
<div class="star-rating"> <input type="radio" name="rating" id="star1" /><label for="star1" class="star">★</label> <input type="radio" name="rating" id="star2" /><label for="star2" class="star">★</label> <input type="radio" name="rating" id="star3" /><label for="star3" class="star">★</label> <input type="radio" name="rating" id="star4" /><label for="star4" class="star">★</label> <input type="radio" name="rating" id="star5" /><label for="star5" class="star">★</label> </div>
CSS中隐藏input，用label模拟点击：
input[type="radio"] {
display: none;
}
label.star {
font-size: 30px;
color: #ddd;
cursor: pointer;
padding: 0 5px;
}
label.star:hover,
label.star:hover ~ label.star {
color: gold;
}
input[type="radio"]:checked ~ label.star {
color: #ddd;
}
input[type="radio"]:checked + label.star,
input[type="radio"]:checked + label.star ~ label.star {
color: gold;
}
基本上就这些。这种方法不依赖图片或外部库，适合轻量级评分功能。关键是利用兄弟选择器（~）和:hover/:checked状态控制视觉反馈。实际项目中可结合JavaScript存储评分值。不复杂但容易忽略细节比如label的顺序和for属性匹配。
相关标签：
css javascript java html go css样式 排列 JavaScript css html for 选择器 transition input
大家都在看：
css背景图background-image如何添加
css工具PostCSS插件结合使用技巧
css :last-of-type与:first-of-type结合使用技巧
在css中如何用link预加载关键样式
如何用css实现响应式图片懒加载样式
css工具PostCSS插件结合使用技巧
css :last-of-type与:first-of-type结合使用技巧
在css中如何用link预加载关键样式
如何用css实现响应式图片懒加载样式
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容