本文详解如何通过调整 HTML 结构与 CSS 选择器，实现点击单选按钮后其关联 label 持久变色的效果——核心在于将 <input type="radio"> 置于 <label> 之前，并使用 :checked + label 邻居选择器触发样式更新。
本文详解如何通过调整 html 结构与 css 选择器，实现点击单选按钮后其关联 label 持久变色的效果——核心在于将 `` 置于 `
在构建交互式表单（如宠物选择面板）时，仅靠 :hover 实现悬停高亮远远不够——用户需要明确感知“当前已选中哪一项”。原代码中尝试用 input[type='radio'].petCard:checked + label 无效，根本原因有二：
- HTML 结构错位：<label> 写在 <input> 之前，导致 CSS 无法通过 +（相邻兄弟选择器）向上匹配；
- 类名误用：.petCard 属于 <label>，而非 <input>，因此 input.petCard:checked 永远不匹配。
✅ 正确解法是：调整 DOM 顺序 + 修正 CSS 选择器，无需 JavaScript 即可实现纯 CSS 的状态持久化。
✅ 步骤一：修正 HTML 结构
确保每个 <input type="radio"> 紧邻其对应 <label> 之前，并保持 for 与 id 严格一致：
<div class="btnStats">
<input type="radio" name="mascota" id="garydous" />
<label class="petCard" for="garydous">
<p>Garydous</p>
<img src="resources/Garydous.png" alt="Garydous">
</label>
<input type="radio" name="mascota" id="chikbo" />
<label class="petCard" for="chikbo">
<p>Chikbo</p>
<img src="resources/picathor.png" alt="Chikbo">
</label>
<input type="radio" name="mascota" id="smyglet" />
<label class="petCard" for="smyglet">
<p>smyglet</p>
<img src="resources/smyglet.png" alt="Smyglet">
</label>
</div>? 提示：<input> 必须与 <label> 处于同一父容器内，且中间不能插入其他元素，否则 + 选择器失效。
✅ 步骤二：更新 CSS 样式规则
移除错误的 .petCard 类绑定，改用语义清晰的 :checked + label 组合：
/* 隐藏 radio 按钮本身，保留可访问性 */
input[type="radio"] {
display: none;
}
/* 当 radio 被选中时，其后紧跟的 label 应高亮 */
input[type="radio"]:checked + label {
background-color: #f0f8ff; /* 浅蓝背景 */
border-color: #b0e0ff; /* 柔和边框色 */
transform: scale(1.03); /* 微微放大，增强反馈感 */
box-shadow: 0 0 8px rgba(176, 224, 255, 0.6);
}
/* 保留悬停效果作为辅助提示 */
label.petCard:hover {
cursor: pointer;
background-color: #e6f7ff;
}⚠️ 注意事项与最佳实践
- 无障碍友好：display: none 隐藏了原生 radio，但 <label> 的 for 属性仍确保屏幕阅读器可识别控件状态，符合 WCAG 标准。
- 避免冗余 JS：无需监听 click 或手动切换 class——浏览器原生 :checked 状态已足够可靠且性能更优。
- 兼容性保障：:checked + label 在所有现代浏览器（Chrome/Firefox/Safari/Edge）及 IE9+ 中均完美支持。
- 扩展性建议：若需多组独立单选（如“攻击类型”），只需复用相同结构与 CSS，无需额外逻辑。
✅ 效果验证
完成上述修改后：
- 点击任意宠物卡片 → 对应 <label> 立即应用高亮样式；
- 切换选择 → 原高亮自动消失，新选中项实时高亮；
- 页面刷新或回退后，浏览器会自动恢复最后选中状态（得益于原生表单记忆机制）。
这种基于语义 HTML 与原生伪类的方案，简洁、健壮、无侵入性，是实现“点击即高亮”交互的理想范式。
