Starability库3星评级设置问题：输入正常但结果仍显示5星

你用Starability实现3星评级时，输入功能正常但结果展示仍为5星，是因为starability-result类的默认样式是生成5个星星，需要通过自定义CSS覆盖默认规则：

步骤1：替换星星数量 #

添加以下CSS，将默认的5星替换为3星：

.starability-result::before {
  content: "\2605\2605\2605"; /* 3个实心星符号 */
}

步骤2：调整高亮宽度 #

Starability默认按5星比例计算高亮宽度，需要重新定义3星下各评级的高亮范围：

/* 1星高亮 */
.starability-result[data-rating="1"]::after {
  width: 33.33%;
}

/* 2星高亮 */
.starability-result[data-rating="2"]::after {
  width: 66.66%;
}

/* 3星高亮 */
.starability-result[data-rating="3"]::after {
  width: 100%;
}

验证HTML结构 #

确保结果展示标签的data-rating属性正确绑定评级值：

<p class="starability-result" data-rating="<%= entry.priority %>">
  Rated: <%= entry.priority %> stars
</p>

修改完成后，结果展示就会显示3个星星，且对应评级的星星会正确高亮。

内容的提问来源于stack exchange，提问作者Sburly