三种方式使用纯 CSS 实现星级评分

使用纯CSS实现星级评分可以通过使用伪元素和flex布局来完成。以下是一个简单的例子：

<div class="rating">
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</div>

.rating {
  display: flex;
  align-items: center;
}
 
.star {
  font-size: 24px; /* 可以根据需要调整星星的大小 */
  margin-right: 2px; /* 星星之间的间隔 */
  position: relative;
  cursor: pointer;
}
 
.star::before {
  content: '★'; /* 使用星星的unicode字符 */
  position: absolute;
  color: #f2c80f; /* 未选中的星星颜色 */
}
 
.star:hover::before,
.star:hover ~ .star::before {
  color: #f2c80f; /* 鼠标悬停时的颜色 */
}
 
/* 如果需要实现选中的星星，可以通过增加一个已选中类名来实现 */
.star.selected::before {
  content: '★';
  color: #f2c80f; /* 选中的星星颜色 */
}

这个例子中，.rating是包含星星的容器，.star是每个可点击的星星元素。通过CSS伪元素::before来显示星星形状，并且通过设置cursor: pointer;让星星看起来可点击。当鼠标悬停在星星上时，通过hover伪类选择器来改变颜色，表示可以进行选择。如果需要实现选中状态，可以在JavaScript中动态添加一个.selected类到已选中的星星元素上。