通过 css 的 :has() 伪类可实现对包含已勾选 radio 的父容器整体加边框，同时配合 + 邻居选择器优化标签样式，兼容现代浏览器（chrome 105+、safari 15.4+、firefox 121+），并提供降级方案确保基础功能可用。
在表单交互设计中，常需突出显示用户已选中的单选按钮（radio）及其对应标签，以增强视觉反馈与可访问性。由于 <input type="radio"> 本身无法直接设置宽高或边框（原生控件渲染受限），且其与 <label> 是兄弟关系而非父子嵌套，因此不能简单用 .form-check:checked（该写法无效：.form-check 元素自身无 :checked 状态）或 ::after 伪元素（::after 作用于 .form-check 时无法感知内部 input 状态）来实现目标。
✅ 正确解法是利用 CSS :has() 关系选择器，从父容器 .form-check 出发，检测其子级 radio 是否被选中：
.form-check:has(> input[type="radio"]:checked) {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border: 2px solid #dc3545;
border-radius: 8px;
background-color: #fff9f9;
}该规则表示：当 .form-check 内部存在一个直接子元素 <input type="radio"> 且处于 :checked 状态时，为其整体添加红色边框与圆角背景。注意使用 > input[type="radio"] 可提升选择器特异性与语义准确性。
⚠️ 注意事项：
- :has() 尚未在所有旧版浏览器中支持（如 Chrome < 105、Edge < 105、Firefox < 121）。生产环境建议添加渐进增强策略：
- 基础层：始终为 .form-check 设置 cursor: pointer 和轻微 hover 效果，保障交互提示；
- 增强层：用 @supports (selector(:has(*))) { ... } 包裹 :has() 样式，避免不支持时解析错误；
- 不要尝试给 input:checked::after 添加样式——原生 radio 不支持 ::before/::after 伪元素（仅部分自定义复选框方案中通过隐藏原生 input + 用 label 模拟实现）；
- 若需进一步美化选中状态（如在 radio 右侧叠加小圆点图标），应通过 input:checked + label::before 实现，但本例中统一边框已足够清晰。
完整可用示例（含 HTML + CSS）：
<div class="form-check fs-3 mb-3"> <input id="first_question" name="first_question" type="radio" value="n"> <label for="first_question">No</label> </div> <div class="form-check fs-3 mb-3"> <input id="second_question" name="first_question" type="radio" value="y"> <label for="second_question">Yes</label> </div>
/* 基础交互优化 */
.form-check {
cursor: pointer;
transition: all 0.2s ease;
}
/* 现代浏览器增强：统一高亮选中项 */
@supports (selector(:has(*))) {
.form-check:has(> input[type="radio"]:checked) {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border: 2px solid #dc3545;
border-radius: 8px;
background-color: #fff9f9;
}
/* 微调 label 间距，避免文字紧贴边框 */
.form-check input[type="radio"]:checked + label {
margin-left: 8px;
}
}
/* 可选：为无障碍体验增加 focus-outline */
.form-check input:focus-visible + label {
outline: 2px solid #007bff;
outline-offset: 2px;
}总结：统一高亮 radio 与其 label 的核心在于「状态感知上移」——将样式逻辑放在共同父容器上，并借助 :has() 建立父子状态关联。这是现代 CSS 解决表单状态联动的优雅范式，既语义清晰，又无需 JavaScript 干预，推荐在支持环境中优先采用。
