CSS 如何实现 5 星评分组件？

Question

CSS 如何实现 5 星评分组件？

仓乃文 · Accepted Answer

5 星评分组件通过 radio + label + :checked + ~ 兄弟选择器实现纯 CSS 的星级评分交互，无需 JavaScript。 ```css .star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; } .star-rating input { display: none; } .star-rating label { font-size: 30px; color: #ddd; cursor: pointer; transition: color 0.2s; } .star-rating label::before { content: "★"; } .star-rating input:checked ~ label { color: #ffc107; } .star-rating label:hover, .star-rating label:hover ~ label { color: #ffc107; } ``` HTML 结构： ```html ``` 补充说明： - flex-direction: row-reverse 反转顺序，让 ~ 选择器能选中前面的星星 - :checked ~ label 选中当前及之前所有星星并高亮 - :hover ~ label 实现悬浮预览效果 - ★ 是 Unicode 字符 U+2605，无需图片或图标库