CSS实现星级评分大于1的数值无法显示半星问题求助

• 你使用的CSS采用^=前缀匹配规则匹配data-star属性，所有星级相关选择器的优先级完全相同
• 整星规则（例如[data-star^="4"]）的声明顺序在所有小数规则（例如[data-star^="4.5"]）之后，data-star="4.5"会同时命中以上两个选择器，优先级相同时后声明的整星规则会覆盖小数规则的宽度值，最终只显示4颗整星
• 小于1的数值没有单独的[data-star^="0"]整星规则，因此不会触发覆盖问题，半星可以正常显示

推荐选择以下任意一种方案修改：

方案1：调整规则声明顺序 #

将所有带小数的规则移到对应整数规则的前方，避免整星规则覆盖小数规则：

/* 先写所有4开头的小数规则 */
[data-star^="4.1"]::after{width:82%}
[data-star^="4.2"]::after{width:84%}
[data-star^="4.3"]::after{width:86%}
[data-star^="4.4"]::after{width:88%}
[data-star^="4.5"]::after{width:90%}
[data-star^="4.6"]::after{width:92%}
[data-star^="4.7"]::after{width:94%}
[data-star^="4.8"]::after{width:96%}
[data-star^="4.9"]::after{width:98%}
/* 最后写整数规则 */
[data-star^="4"]::after{width:80%}

所有数值段都按照「小数规则在前，整数规则在后」的顺序调整即可。

方案2：改用精准完全匹配规则（更稳妥，无顺序要求） #

将整星的前缀匹配^=改为完全匹配=，让整星规则仅命中纯整数值，不会匹配到带小数的数值：

/* 整星规则修改为完全匹配 */
[data-star="1"]::after{width:20%}
[data-star="2"]::after{width:40%}
[data-star="3"]::after{width:60%}
[data-star="4"]::after{width:80%}
[data-star="5"]::after{width:100%}

小数规则保持原有写法不变即可，修改后不存在规则覆盖问题，也不需要调整声明顺序。

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