在网页开发中，评分星星是常见的前端交互组件，传统实现方式往往需要依赖JavaScript处理鼠标事件，其实仅通过CSS的hover伪类和伪元素就能完成基础的交互效果，无需编写任何JS代码。这种方式实现简单、性能更好，适合轻量级的评分场景使用。
实现思路梳理
整个评分星星组件的实现核心分为三个部分：首先是搭建基础的HTML结构，用列表承载每一颗星星；其次通过伪元素生成星星的视觉形状，避免额外添加冗余的HTML标签；最后利用hover伪类结合兄弟选择器，实现鼠标悬停时星星的高亮状态切换。
HTML结构搭建
我们使用无序列表作为星星的容器，每个列表项代表一颗星星，不需要在列表项内部添加额外的内容，所有视觉表现都通过CSS实现。具体结构如下：
<div class="star-rating">
<ul class="star-list">
<li class="star-item"></li>
<li class="star-item"></li>
<li class="star-item"></li>
<li class="star-item"></li>
<li class="star-item"></li>
</ul>
</div>
基础CSS样式设置
首先重置默认的列表样式，设置星星的排列方式为水平排列，同时定义星星的基础尺寸和颜色。这里我们使用::before伪元素来生成星星的形状，通过边框和旋转属性模拟五角星的外观。
/* 容器样式 */
.star-rating {
padding: 20px;
}
/* 星星列表重置 */
.star-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 8px;
}
/* 单颗星星基础样式 */
.star-item {
width: 32px;
height: 32px;
position: relative;
cursor: pointer;
}
/* 用伪元素生成星星形状 */
.star-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ddd;
/* 裁剪为五角星形状 */
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
结合hover伪类实现交互效果
接下来就是核心的交互实现，我们需要实现两个效果：一是鼠标悬停到某颗星星上时，这颗星星本身高亮；二是鼠标悬停时，这颗星星之前的所有星星也同步高亮。这里需要用到:hover伪类和相邻兄弟选择器~。
首先设置鼠标悬停时当前星星的高亮样式：
/* 鼠标悬停时当前星星高亮 */
.star-item:hover::before {
background-color: #ffc107;
}
然后设置鼠标悬停时，当前星星之前的所有星星也高亮，这里利用兄弟选择器的反向逻辑，先让所有在悬停元素后面的星星保持默认样式，再给前面的星星设置高亮：
/* 鼠标悬停时，当前星星之后的所有星星保持默认 */
.star-item:hover ~ .star-item::before {
background-color: #ddd;
}
/* 鼠标悬停时，当前星星之前的所有星星高亮 */
.star-list:hover .star-item::before {
background-color: #ffc107;
}
.star-item:hover ~ .star-item::before {
background-color: #ddd;
}
上面的样式逻辑是：当鼠标悬停在星星列表上时，先默认把所有星星都设为高亮，然后再把悬停星星之后的星星恢复为默认样式，这样就实现了悬停时前面星星都高亮的效果。
完整代码示例
把所有的代码整合起来，就可以得到一个完整的可运行的评分星星组件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS评分星星组件</title>
<style>
.star-rating {
padding: 20px;
}
.star-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 8px;
}
.star-item {
width: 32px;
height: 32px;
position: relative;
cursor: pointer;
}
.star-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ddd;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star-item:hover::before {
background-color: #ffc107;
}
.star-list:hover .star-item::before {
background-color: #ffc107;
}
.star-item:hover ~ .star-item::before {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="star-rating">
<ul class="star-list">
<li class="star-item"></li>
<li class="star-item"></li>
<li class="star-item"></li>
<li class="star-item"></li>
<li class="star-item"></li>
</ul>
</div>
</body>
</html>
效果优化建议
如果需要让评分效果更流畅，可以给星星的::before伪元素添加过渡属性，让颜色切换时有渐变效果：
.star-item::before {
/* 其他原有样式 */
transition: background-color 0.2s ease;
}
如果需要实现点击后固定评分的效果，可以结合少量的JavaScript给点击的星星添加选中类，再通过CSS设置选中类的样式即可，核心的hover交互依然可以保留。