当通过 javascript 克隆并重建表单控件（如评分组件）时，若未正确设置 `
在动态调整评分量表（如从 10 分缩放至 5 分）的过程中，常见做法是清空 .rating 容器并重新插入克隆的 <input> 和 <label> 元素。但原始代码中使用了 labelClone.for = radioClone.id —— 这是无效的，因为 DOM 中 for 是 HTML 属性（attribute），而 JavaScript 中对应的标准属性名是 htmlFor（注意大小写与驼峰命名）。直接赋值 for 不会同步更新底层关联逻辑，导致浏览器无法识别 <label> 与 <input> 的绑定关系，从而使 input:checked ~ label 这类兄弟选择器完全失效，最终表现为：渐变背景“冻结”、点击无响应、悬停效果消失。
✅ 正确做法是使用标准 DOM 属性 htmlFor：
labelClone.htmlFor = radioClone.id;
同时需确保：
- 所有克隆的 <input> 元素拥有唯一 id（已通过 ${idPrefix}-${i} 实现）；
- <label> 的 htmlFor 值严格匹配对应 <input> 的 id；
- <input> 的 name 属性保持一致（确保单选互斥），原代码中已保留 name="rating"，无需修改。
此外，为增强健壮性，建议在 scaleModified 函数末尾触发一次重绘或强制样式刷新（虽非必需，但在复杂场景下可避免渲染延迟）：
// 可选：强制重排以确保样式立即生效 ratingContainer.offsetHeight; // 触发 layout
⚠️ 注意事项：
- 避免混用 setAttribute('for', ...) 与 htmlFor —— 二者等效，但 htmlFor 更语义化且性能略优；
- 若使用框架（如 React/Vue），应优先采用声明式更新而非手动 DOM 操作；
- 渐变背景 background: linear-gradient(...) 本身不受克隆影响，问题根源始终是 CSS 选择器因 DOM 关系断裂而无法匹配目标元素。
总结：htmlFor 是连接 <label> 与 <input> 的关键桥梁。动态操作表单时，必须显式维护这一绑定关系，才能确保所有基于 :checked、:hover 等伪类的视觉反馈（包括渐变背景切换）持续生效。
