如何实现选中单选按钮标签的持续高亮显示效果？

本文共计914个文字，预计阅读时间需要4分钟。

通过调整HTML结构和使用CSS选择器，可以实现在点击单选按钮（radio）后，其关联的label标签保持持续变色的效果。核心在于将``标签置于``标签之前，并使用`:checked + label`选择器更新相邻选择器的样式。

以下是一个简化的示例：

在构建交互式表单（如宠物选择面板）时，用户常期望视觉反馈能“记住”当前选择——例如点击某个宠物卡片后，该卡片高亮并保持状态，而非仅在悬停（:hover）时短暂变化。原代码中尝试用 input[type='radio'].petCard:checked + label 无效，根本原因有二：一是 .petCard 类实际作用于 <label> 元素，而非 <input>，因此该选择器语法错误；二是 HTML 中 <label> 位于 <input> 之前，导致 CSS 的 +（相邻兄弟选择器）无法向上匹配。

✅ 正确解法分三步：

1. 调整 HTML 结构：确保 <input> 在 <label> 之前
这是启用 :checked + label 的前提。