本文详解如何使用纯 CSS 构建支持多个实例的 5 星评分系统，重点解决因 label[for] 与 input[id] 不匹配导致的交互失效问题，并提供完整、语义化、可复用的 HTML+CSS 方案。
本文详解如何使用纯 css 构建支持多个实例的 5 星评分系统，重点解决因 `label[for]` 与 `input[id]` 不匹配导致的交互失效问题，并提供完整、语义化、可复用的 html+css 方案。
在构建纯 CSS 驱动的星级评分组件时，一个常见却极易被忽视的关键点是：<label> 元素的 for 属性必须严格等于其关联 <input> 的 id 值。这是浏览器实现点击标签触发表单控件行为的基础机制（参见 MDN label 文档）。一旦 for 值与 id 不一致（例如原代码中所有 label[for="star5"] 却对应 id="1star5"），点击将无法激活对应单选框，后续所有基于 :checked 的 CSS 样式（如高亮选中星、悬停反馈）自然全部失效。
以下是一个经过验证、可无限复用的纯 CSS 5 星评分实现（支持半星，无需 JavaScript）：
✅ 正确结构要点
- 每个 <fieldset class="rating"> 独立封装一组评分；
- 所有 <input type="radio"> 必须拥有全局唯一 id；
- 每个 <label> 的 for 属性必须精确匹配其目标 <input> 的 id；
- <fieldset> 标签必须正确闭合（原示例中存在嵌套未闭合问题）；
- 同一组内的所有 <input> 共享相同的 name（如 "rating"），确保单选互斥。
? 完整可运行代码示例
<!-- 第一组评分 --> <fieldset class="rating"> <input type="radio" id="review1-star5" name="review1-rating" value="5" /> <label class="full" for="review1-star5" title="极佳 — 5 星"></label> <input type="radio" id="review1-star4half" name="review1-rating" value="4.5" /> <label class="half" for="review1-star4half" title="很好 — 4.5 星"></label> <input type="radio" id="review1-star4" name="review1-rating" value="4" /> <label class="full" for="review1-star4" title="很好 — 4 星"></label> <input type="radio" id="review1-star3half" name="review1-rating" value="3.5" /> <label class="half" for="review1-star3half" title="一般 — 3.5 星"></label> <input type="radio" id="review1-star3" name="review1-rating" value="3" /> <label class="full" for="review1-star3" title="一般 — 3 星"></label> <input type="radio" id="review1-star2half" name="review1-rating" value="2.5" /> <label class="half" for="review1-star2half" title="较差 — 2.5 星"></label> <input type="radio" id="review1-star2" name="review1-rating" value="2" /> <label class="full" for="review1-star2" title="较差 — 2 星"></label> <input type="radio" id="review1-star1half" name="review1-rating" value="1.5" /> <label class="half" for="review1-star1half" title="很差 — 1.5 星"></label> <input type="radio" id="review1-star1" name="review1-rating" value="1" /> <label class="full" for="review1-star1" title="极差 — 1 星"></label> <input type="radio" id="review1-star05" name="review1-rating" value="0.5" /> <label class="half" for="review1-star05" title="极差 — 0.5 星"></label> </fieldset> <!-- 第二组评分（完全独立，仅需修改 id 和 name 前缀） --> <fieldset class="rating"> <input type="radio" id="review2-star5" name="review2-rating" value="5" /> <label class="full" for="review2-star5" title="极佳 — 5 星"></label> <input type="radio" id="review2-star4half" name="review2-rating" value="4.5" /> <label class="half" for="review2-star4half" title="很好 — 4.5 星"></label> <!-- ... 其余项同理，省略以保持简洁 --> <input type="radio" id="review2-star05" name="review2-rating" value="0.5" /> <label class="half" for="review2-star05" title="极差 — 0.5 星"></label> </fieldset>
配套 CSS（已优化兼容性与可维护性）：
.rating {
display: inline-block;
unicode-bidi: bidi-override;
direction: rtl;
text-align: left;
margin: 0.5em 0;
}
.rating > input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.rating > label {
display: inline-block;
cursor: pointer;
width: 1.2em;
height: 1.2em;
margin: 0 0.1em;
font-size: 1.5rem;
color: #ddd;
transition: color 0.2s;
position: relative;
}
.rating > label:before {
content: "★";
position: absolute;
left: 0;
top: 0;
}
.rating > label.half:before {
content: "☆";
position: absolute;
left: 0;
top: 0;
}
/* 选中状态 */
.rating > input:checked ~ label {
color: #ffcc00;
}
/* 悬停时高亮当前及左侧所有星 */
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: #ffcc00;
}
/* 悬停时微调已选中的相邻星（增强反馈） */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label {
color: #ffd740;
}⚠️ 关键注意事项
- 命名规范至关重要：为避免冲突，强烈建议为每组评分使用唯一前缀（如 review1-, product2-），同时更新 name 和所有 id/for；
- 不要依赖 FontAwesome 字体：本方案使用原生 Unicode ★（U+2605）和 ☆（U+2606），免去字体加载依赖，提升首屏性能与兼容性；
- 无障碍友好：<fieldset> + <label> 结构天然支持屏幕阅读器，title 属性提供额外语义；
- 移动端适配：添加 cursor: pointer 和足够点击区域（最小 44×44px 推荐），可进一步通过媒体查询调整 font-size 和 margin；
- 禁用默认聚焦轮廓：如需视觉净化，可追加 outline: none 到 input:focus，但请确保提供替代焦点指示（如阴影或边框）。
通过严格遵循 id 与 for 的一一映射原则，并采用语义化、模块化的 HTML 结构，你就能轻松在单页中部署任意数量的独立 CSS 星级评分组件——零 JS、高可访问、易维护。
立即学习“前端免费学习笔记（深入）”；
