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

在前端页面开发中，评分星星控件是非常常见的交互组件，很多场景下我们不需要引入复杂的前端框架，仅通过css的基础属性就能实现简易的评分星星效果。核心思路是利用inline-block让星星元素横向排列，再通过hover伪类结合兄弟选择器实现鼠标悬停时的样式切换，既简单又高效。

基础结构与样式准备

首先我们需要准备星星的html结构，这里使用无序列表来存放星星元素，每个列表项代表一颗星星，默认使用空心的星星样式，选中或者悬停时切换为实心样式。

<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>

接下来给基础元素设置样式，首先清除默认的列表样式，然后给星星容器设置合适的字体大小，让星星显示清晰，同时给每个星星元素设置inline-block属性，让它们横向排列，并且设置合适的间距。

.star-rating {
  font-size: 24px; /* 控制星星的大小 */
}
.star-list {
  list-style: none; /* 清除默认列表样式 */
  padding: 0;
  margin: 0;
}
.star-item {
  display: inline-block; /* 让星星横向排列 */
  margin: 0 5px; /* 星星之间的间距 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  color: #ccc; /* 默认星星颜色为灰色 */
  transition: color 0.2s ease; /* 添加颜色过渡效果，让切换更平滑 */
}

使用hover伪类实现悬停效果

现在我们利用hover伪类来实现鼠标悬停到某颗星星时，该星星的样式变化，这里我们先实现单个星星的悬停效果，当鼠标移动到某颗星星上时，它的颜色变为黄色。

.star-item:hover {
  color: #ffc107; /* 悬停时星星变为黄色 */
}

但是这样的效果还不够，通常评分控件的需求是鼠标悬停到某颗星星时，它前面的所有星星都一起高亮，这时候就需要用到css的兄弟选择器~来实现这个效果。我们需要调整hover的写法，让鼠标悬停时，当前星星以及它前面的所有星星都变色。

/* 鼠标悬停时，当前星星以及后面的所有星星都高亮 */
.star-item:hover,
.star-item:hover ~ .star-item {
  color: #ffc107;
}

这里要注意兄弟选择器~选择的是当前元素后面的所有同级兄弟元素，所以如果我们的星星是从左到右排列，想要前面的星星也高亮，需要调整html结构的顺序，或者使用反向的兄弟选择器思路。这里我们调整一下html的顺序，让星星从右到左排列，然后通过浮动或者flex的reverse属性调整显示顺序，这样hover的时候就能实现前面的星星都高亮的效果。

<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>

.star-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 使用flex布局 */
  flex-direction: row-reverse; /* 反向排列，让第一个li显示在最右边 */
  justify-content: flex-end; /* 整体靠左排列 */
}
.star-item {
  display: inline-block;
  margin: 0 5px;
  cursor: pointer;
  color: #ccc;
  transition: color 0.2s ease;
}
/* 鼠标悬停时，当前星星以及后面的所有星星（实际显示中是前面的星星）高亮 */
.star-item:hover,
.star-item:hover ~ .star-item {
  color: #ffc107;
}

添加点击选中效果

除了悬停效果，我们还需要实现点击选中星星的功能，这里可以通过给选中的星星添加一个选中类，结合css的优先级来实现选中状态的保持。当用户点击某颗星星时，通过js给它和前面的所有星星添加选中类，选中类的颜色优先级高于默认颜色。

.star-item.selected {
  color: #ffc107; /* 选中状态的星星颜色 */
}

// 获取所有星星元素
const starItems = document.querySelectorAll('.star-item');
// 遍历每个星星，添加点击事件
starItems.forEach((item, index) => {
  item.addEventListener('click', () => {
    // 先清除所有星星的选中状态
    starItems.forEach(star => {
      star.classList.remove('selected');
    });
    // 给当前点击的星星以及前面的所有星星添加选中类
    for (let i = index; i < starItems.length; i++) {
      starItems[i].classList.add('selected');
    }
  });
});

常见问题与优化

在实际使用过程中，可能会遇到一些问题，比如hover效果和选中效果冲突，这时候需要注意css选择器的优先级，选中类的优先级要高于hover伪类的优先级，这样选中之后悬停就不会覆盖选中的状态。另外如果想要使用图标代替默认的字符星星，可以引入图标库，把li里的内容换成对应的图标标签，样式调整方式和字符星星一致。

这种使用inline-block和hover伪类实现的评分星星控件，代码量小，不需要依赖任何第三方库，兼容性也比较好，适合快速实现基础的评分交互需求，开发者可以根据实际的业务场景调整颜色、大小等样式参数。

cssinline-blockhover伪类评分星星控件修改时间：2026-06-22 09:40:04