通过 css 的 :has() 伪类可实现对包含已勾选 radio 的父容器整体加边框，同时配合 + 邻居选择器优化标签样式，兼容现代浏览器（chrome 105+、safari 15.4+、firefox 121+），并提供降级方案确保基础功能可用。
在表单交互设计中，常需突出显示用户已选中的单选按钮（radio）及其对应标签，以增强视觉反馈与可访问性。由于 本身无法直接设置宽高或边框（原生控件渲染受限），且其与
✅ 正确解法是利用 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 内部存在一个直接子元素 且处于 :checked 状态时，为其整体添加红色边框与圆角背景。注意使用 > input[type="radio"] 可提升选择器特异性与语义准确性。
⚠️ 注意事项：
- :has() 尚未在所有旧版浏览器中支持（如 Chrome
- 基础层：始终为 .form-check 设置 cursor: pointer 和轻微 hover 效果，保障交互提示；
- 增强层：用 @supports (selector(:has(*))) { ... } 包裹 :has() 样式，避免不支持时解析错误；
完整可用示例（含 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 干预，推荐在支持环境中优先采用。
