本文详解如何基于你现有的 HTML 结构，通过纯 CSS（利用 :has() 选择器）为每个标签绑定专属内容区域，解决“文字不显示”的核心问题，并提供兼容性备选方案。
本文详解如何基于你现有的 html 结构，通过纯 css（利用 :has() 选择器）为每个标签绑定专属内容区域，解决“文字不显示”的核心问题，并提供兼容性备选方案。
要让每个标签（Tab）正确显示其对应的内容，关键在于建立「选中状态」与「内容可见性」之间的映射关系。你当前的代码已具备完整的标签导航结构（6 个 <input type="radio"> + <label></label>），但缺少内容容器及其显隐控制逻辑——这正是内容“不显示”的根本原因。
✅ 正确结构：添加内容区并关联标签 ID
在 .popup 容器内、.tabs 之后，必须添加独立的 .content 元素，每个元素通过 data-tab 属性与对应 radio 的 id 精确匹配：
<div class="popup">
<div class="tabs">
<!-- 你的 radio + label 结构保持不变 -->
<input type="radio" id="tab1" name="tab" checked>
<label for="tab1">FIRST TAB</label>
<!-- ... 其他5个tab -->
<div class="marker">...</div>
</div>
<!-- ✅ 新增：每个 content 对应一个 tab -->
<div class="content" data-tab="tab1">这是第一个标签页的内容！</div>
<div class="content" data-tab="tab2">这里是第二个标签页的内容。</div>
<div class="content" data-tab="tab3">第三个标签页的内容在此展示。</div>
<div class="content" data-tab="tab4">第四个标签页的文本内容。</div>
<div class="content" data-tab="tab5">第五个标签页的详细信息。</div>
<div class="content" data-tab="tab6">第六个标签页的最终内容。</div>
</div>✅ CSS 控制：用 :has() 动态切换内容显示
在 .popup 样式中加入以下 CSS（注意：需写在 .popup 规则内部或作为独立规则，确保层级有效）：
.popup .content {
display: none; /* 默认全部隐藏 */
flex: 1;
padding: 16px;
overflow-y: auto;
}
/* 当 tab1 被选中时，显示 data-tab="tab1" 的内容 */
.popup:has(#tab1:checked) .content[data-tab="tab1"],
.popup:has(#tab2:checked) .content[data-tab="tab2"],
.popup:has(#tab3:checked) .content[data-tab="tab3"],
.popup:has(#tab4:checked) .content[data-tab="tab4"],
.popup:has(#tab5:checked) .content[data-tab="tab5"],
.popup:has(#tab6:checked) .content[data-tab="tab6"] {
display: block;
}? 原理说明：
:has(#tab1:checked)是父容器.popup的状态检测器，它能感知子元素中哪个 radio 处于checked状态；再结合[data-tab="tab1"]精准定位目标内容块，实现「所见即所选」。立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项与兼容性提醒
-
浏览器支持：
:has()在 Chrome 105+、Edge 105+、Safari 15.4+ 中原生支持（caniuse.com/css-has）。若需支持旧版浏览器（如 IE、旧版 Firefox），必须改用 JavaScript 方案：document.querySelectorAll('input[name="tab"]').forEach(radio => { radio.addEventListener('change', () => { document.querySelectorAll('.content').forEach(el => el.style.display = 'none'); const target = document.querySelector(`.content[data-tab="${radio.id}"]`); if (target) target.style.display = 'block'; }); }); 结构严谨性：确保所有
<input>的name属性值一致（如name="tab"），且每个id与对应data-tab值完全相同（大小写、拼写均需一致）。样式优化建议：为
.content添加flex: 1可使其自动填充剩余空间；配合overflow-y: auto支持长内容滚动，避免溢出。
至此，你的标签页系统即可完整运行：点击任意标签，不仅指示器（.marker）会平滑移动，对应的内容也会即时、准确地呈现。无需框架、不依赖 JS（现代浏览器下），纯粹依靠语义化 HTML 与前沿 CSS 即可交付专业级交互体验。
