通过 :hover 与 display 实现标签切换，1. 结构上用 ul/li 作标签栏，div.tab-pane 存内容；2. css 中设 .tab-pane{display:none}，利用 li:hover ~ .tab-content .tab-pane:nth-child(n) 控制对应内容显示；3. 可添加 flex 布局美化导航栏，li 加 hover 背景过渡；4. 注意该法依赖结构顺序，仅支持悬停触发，移开即隐藏，适合静态页面或初学者练习选择器与层叠控制。
实现标签页切换功能，可以通过 :hover 伪类配合 display 属性控制内容显示与隐藏，适合在不需要 JavaScript 的简单场景中使用。这种方式轻量、易理解，适合 CSS 初学者练习布局与交互控制。
1. 基本结构：HTML 标签与内容区域
页面包含一组标签按钮和对应的内容面板。使用 ul/li 作为标签栏，每个标签对应一个内容区。
<div class="tab-container">
<ul class="tab-nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane">这里是首页内容</div>
<div class="tab-pane">这里是关于内容</div>
<div class="tab-pane">这里是联系内容</div>
</div>
</div>
2. 使用 :hover 控制 display 显示
核心思路是：当鼠标悬停在某个标签上时，通过相邻兄弟选择器（+）或通用兄弟选择器（~）找到对应的内容面板并显示。默认所有面板隐藏，仅在 hover 时显示对应项。
CSS 设置如下：
立即学习“前端免费学习笔记（深入）”；
.tab-pane {
display: none;
padding: 20px;
border: 1px solid #ddd;
background: #f9f9f9;
}
.tab-nav li:hover ~ .tab-content .tab-pane:nth-child(1) {
display: block;
}
.tab-nav li:nth-child(2):hover ~ .tab-content .tab-pane:nth-child(2) {
display: block;
}
.tab-nav li:nth-child(3):hover ~ .tab-content .tab-pane:nth-child(3) {
display: block;
}
说明：
- display: none 默认隐藏所有内容面板
- :hover ~ 选择后续所有同级元素
- :nth-child(n) 精确匹配标签与内容的顺序关系
3. 优化样式与布局
让标签栏更像传统导航，提升可读性。
.tab-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
background: #eee;
border-bottom: 1px solid #ccc;
}
.tab-nav li {
padding: 10px 15px;
cursor: pointer;
transition: background 0.3s;
}
.tab-nav li:hover {
background: #ddd;
}
4. 注意事项与限制
这种纯 CSS 实现方式虽然简单，但有几点需要注意：
- 依赖 HTML 结构顺序，内容块必须紧跟在 nav 后面
- 只能通过悬停触发，无法点击保持（除非用 radio + label 模拟）
- 用户体验不如 JS 控制稳定，移开鼠标即消失
- 不适用于复杂项目，适合学习或静态页面展示
基本上就这些。用 :hover 和 display 实现标签切换，重点在于结构安排和选择器匹配。对初学者来说，是理解 CSS 选择器与层叠行为的好练习。
