css如何制作简易评分星星控件_使用inline-block和hover伪类改变样式

使用CSS和隐藏radio实现五星评分控件，通过label与input关联，利用:hover和:checked状态配合兄弟选择器~控制星星高亮，内联SVG作背景图，支持悬停预览与点击选星。

使用 CSS 制作一个简易的评分星星控件，可以通过 inline-block 布局和 :hover 伪类实现鼠标悬停时高亮星星的效果。结合隐藏的单选按钮（input[type=radio]），还能实现点击选择评分的功能。

基本结构与原理

控件由一组 radio input 和对应的 label 组成。每个 label 代表一个星星，通过 CSS 设置为 inline-block 显示，排列成一行。利用 label 的 for 属性绑定到 input，点击 label 即选中对应分数。 关键点：

• 隐藏 input，只保留 label 可见
• label 使用背景图显示星星，默认为灰色
• 鼠标悬停在某个星星上时，该星及其左侧所有星星高亮（利用 hover + 后续兄弟选择器 ~）
• 选中后的星星保持高亮色，优先级高于 hover 效果

样式控制细节

使用内联 SVG 作为背景图，避免额外资源请求。未选中状态用浅灰色，悬停时变为黄色，选中后为深黄色。 核心 CSS 技巧：

• display: inline-block 让 label 并排排列
• :hover 配合 ~ 选择器，影响后续兄弟元素
• input:checked ~ label 实现持久高亮已选星星
• 将 hover 样式定义在 checked 样式之后，确保悬停时仍可预览更高分

HTML 示例代码

以下是一个完整的五星级评分控件示例：

用户悬停时能实时预览评分效果，点击后选定分数，适合用于评价系统。 基本上就这些。