本文介绍使用 HTML radio 按钮配合 :has() 伪类，实现「仅一个卡片可展开、点击即切换显隐」的纯 CSS 交互方案，无需 JavaScript，兼容现代浏览器。
本文介绍使用 html radio 按钮配合 :has() 伪类，实现「仅一个卡片可展开、点击即切换显隐」的纯 css 交互方案，无需 javascript，兼容现代浏览器。
在构建响应式内容展示界面（如游戏章节导航、知识卡片库）时，常需实现「点击某一项展开为全屏视图，同时确保其他项自动收起」的效果。若误用 <input type="checkbox">，所有卡片会因共享 .games:has(input:checked) 选择器而同步响应；若仅改用 radio 却未统一 name 属性，则无法形成互斥组，仍无法控制唯一激活态。
✅ 正确解法：利用 <input type="radio"> 的天然单选机制 + :has() 精准定位父容器
关键在于两点：
- 所有 radio 输入框必须具有相同的
name属性值（如name="chapter"），使其成为逻辑互斥组； - 使用
:has(input:checked)直接作用于.game-list（而非外层.games），确保样式仅应用于当前被选中的卡片。
以下是优化后的核心代码结构：
Wjs Localizing Video
下载
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
/* 仅对当前选中的 .game-list 应用展开样式 */
.game-list:has(input:checked) {
width: 50vw;
height: 100vh;
margin: 50px;
z-index: 10; /* 可选：确保展开时层级最高 */
transition: all 0.3s ease; /* 添加平滑过渡 */
}
.game-list {
margin: 30px;
padding: 20px;
width: 325px;
height: 275px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 75, 255, 0.1);
box-shadow: 0 8px 40px 0 rgba(45, 57, 231, 0.37);
backdrop-filter: blur(4px);
border-radius: 10px;
transition: transform 0.2s ease; /* hover 动画也建议加 transition */
}
.game-list:hover:not(:has(input:checked)) {
transform: scale(1.05); /* 仅对未展开的卡片启用悬停放大 */
}
对应 HTML 结构（注意 name 统一、id 唯一、for 匹配）：
<div class="games">
<label for="Chapter-1">
<div class="game-list">
<input type="radio" name="chapter" hidden id="Chapter-1">
@@##@@
<h1 style="color:#FFFFFF">Chapter 1:</h1>
<p style="color:#FFFFFF; font-size:20px">Step-by-Step</p>
</div>
</label>
<label for="Chapter-2">
<div class="game-list">
<input type="radio" name="chapter" hidden id="Chapter-2">
@@##@@
<h1 style="color:#FFFFFF">Chapter 2:</h1>
<p style="color:#FFFFFF; font-size:20px">Races</p>
</div>
</label>
<!-- 其余 Chapter-3 至 Chapter-6 同理，name 均为 "chapter" -->
</div>
⚠️ 注意事项：
-
ID 命名规范：避免空格（如
"Chapter 1"），推荐使用连字符（"Chapter-1"），否则for属性可能失效； -
:has()兼容性：目前支持 Chrome 105+、Firefox 119+、Safari 15.4+。如需兼容旧版 Safari，可搭配轻量 JS 回退（本文聚焦纯 CSS 方案）； -
无障碍访问：
<label></label>包裹整个.game-list是良好实践，确保点击区域覆盖完整卡片，提升可访问性； -
收起逻辑：由于 radio 组中“无选项被选中”是合法状态，用户点击已展开卡片时，不会自动取消选中——这是预期行为。若需“点击已展开项即收起”，则必须引入 JavaScript（监听
change事件并手动清除checked）。纯 CSS 无法实现「单选按钮的 toggle 收起」，此为技术限制。
总结：本方案以最小成本达成「单卡独占展开 + 多卡互斥」的核心需求，语义清晰、性能优异，是现代 CSS 交互设计的典型范例。
