本文详解在 php 动态生成多组星标评分控件时，css 选择器因 html 结构限制导致悬停/选中样式仅对首组生效的根本原因，并提供兼容性好、无需 javascript 的纯 css 修复方案。

本文详解在 php 动态生成多组星标评分控件时，css 选择器因 html 结构限制导致悬停/选中样式仅对首组生效的根本原因，并提供兼容性好、无需 javascript 的纯 css 修复方案。

在构建多用户评分系统（如审计员满意度打分）时，常通过 PHP 循环动态渲染多组 + 组合的星标控件。常见实现依赖 ~（通用兄弟选择器）和 +（相邻兄弟选择器）触发“鼠标悬停时高亮左侧所有星星”或“选中后保持高亮”的效果。但开发者常遇到一个典型问题：只有第一组评分控件响应悬停与选中样式，其余组完全失效。

根本原因在于原始 CSS 中的以下规则：

.rating label:hover ~ label,
.rating input:checked + label ~ label {
    color: #ffc107;
}

该写法隐含一个关键前提：所有 必须是同一父容器内连续的兄弟元素，且 必须紧邻其对应的 。但在实际循环输出中，每组 .rating 是独立的

容器，内部结构为：

<div class="rating rating__1">
  <input id="rating-5" name="rating-1" ...><label for="rating-5">★</label>
  <input id="rating-4" name="rating-1" ...><label for="rating-4">★</label>
  <!-- ... -->
</div>

此时，input:checked + label ~ label 只能影响该 input 后面同级的 label，而由于每个 后紧跟的是它自己的 （非其他星星），后续 ~ label 实际匹配的是同一组内更右侧的 label —— 这在 RTL 布局下逻辑正确。但原始代码未处理 pointer-events 和层叠上下文，导致鼠标实际触发区域与视觉位置错位，尤其在多组并存时，浏览器事件捕获易发生干扰，最终表现为“仅第一组响应”。

✅ 正确解法是重构交互逻辑，确保：

• 所有 可被鼠标精准触发（解除 pointer-events: none 的误用）；
• 完全隐藏但保留语义与可访问性；
• 利用 position: relative 建立独立定位上下文，避免多组间样式污染；
• 通过 transform 和 z-index 精确控制图层顺序，使 始终位于 上方。

以下是经验证的修复版 CSS（已适配多组动态渲染场景）：

<style>
.rating {
    direction: rtl;
    unicode-bidi: bidi-override;
    color: #ddd;
    position: relative; /* 关键：为每组创建独立定位上下文 */
    display: inline-flex; /* 保证内部元素水平排列 */
    gap: 2px; /* 星星间距 */
}

.rating input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    /* 隐藏但保留在可访问性树中 */
}

.rating label {
    cursor: pointer;
    display: inline-block;
    font-size: 1.2em;
    transition: color 0.2s ease;
}

/* 悬停时：当前 label 及其左侧所有 label（RTL 下即 ~ label）变色 */
.rating label:hover,
.rating label:hover ~ label,
/* 选中时：对应 input 后的第一个 label，及其左侧所有 label */
.rating input:checked + label,
.rating input:checked + label ~ label {
    color: #ffc107;
}
</style>

? 关键优化说明：

• 移除了危险的 pointer-events: none（原答案中此设置会彻底禁用 label 的鼠标事件，实际不可取）；
• 使用 position: absolute 隐藏 ，比 display: none 更安全（不影响表单提交与可访问性）；
• 添加 transition 提升交互反馈体验；
• display: inline-flex + gap 替代纯 rtl 依赖，增强布局可控性。

? PHP 输出建议：为避免 id 冲突（如多组均含 id="rating-5"），应动态生成唯一 ID：

<?php foreach($auditors as $index => $auditor): ?>
    <?php if (empty($auditor)) continue; ?><div class="form-group ms-5 d-flex justify-content-between">
        <p><small>= htmlspecialchars($auditor) ?></small></p>
        <div class="rating rating__<?= $index + 1 ?>">
            <?php for ($i = 5; $i >= 1; $i--): ?>
                <input id="rating-<?= $index + 1 ?>-<?= $i ?>" class="rating-input" type="radio" name="rating-<?= $index + 1 ?>" value="<?= $i ?>" :>>
                <label for="rating-<?= $index + 1 ?>-<?= $i ?>">
                    <i class="fa-solid fa-star"></i>
                </label>
            <?php endfor; ?>
</div>
    </div>
<?php endforeach; ?>

✅ 最终效果：每组评分控件完全独立，悬停任意星星即高亮该组全部左侧星星（RTL 视觉逻辑），点击后持久高亮所选星级，且支持键盘 Tab 导航与空格/回车选择，符合 WCAG 2.1 可访问性标准。

总结：多组评分样式失效本质是 CSS 选择器作用域与 HTML 结构不匹配所致。通过合理运用 position、z-index、opacity 隐藏表单控件，配合语义化标签绑定与精准兄弟选择器，即可在零 JS 的前提下实现健壮、可扩展、无障碍的评分交互体验。