最稳妥的纯css标签页方案是使用:target伪类，通过url锚点触发面板显示，需配合唯一id和正确href格式，并用section:not(:target){display:none}与section:first-of-type{display:block}解决默认显示问题。
用 :target 实现无 JS 标签页切换
纯 CSS 标签页最稳妥的方案就是靠 :target，它天然绑定 URL 锚点，点击链接自动高亮对应面板，不用监听事件、也不用操作 class。前提是 HTML 结构得配合：每个标签项要有唯一 id，且触发链接的 href 必须是 #id 形式。
常见错误是把 href 写成 /#tab2 或 javascript:void(0) —— 前者会刷新页面，后者根本不会触发 :target；还有人给面板加了 display: none 却忘了给默认激活项设 display: block，结果首次打开全是空白。
- 标签按钮用
@#@#@#@#@#@#@#@#@#@0，不要用<button></button> - 对应面板写成
<section id="tab1">...</section>，id必须和href的锚点完全一致（大小写敏感） - 初始状态靠
:target隐式控制，但首次加载没锚点时所有面板都不可见，得额外加一条规则：section:not(:target) { display: none; }，再单独让第一个面板默认显示：section:first-of-type { display: block; }
Sass 里用 @if 控制不同标签的过渡动效
不同标签内容高度差异大时，硬写 max-height: 0 → 500px 会导致动画卡顿或收不严——Sass 本身不执行运行时逻辑，但能帮你按需生成更精准的 CSS。比如给「图文混排」类标签加 opacity + transform，给「纯文字」类只用 height 过渡，避免重排。
性能影响很实际：用 height 动画必须知道具体像素值，否则浏览器无法插值；而 max-height 虽然免测高度，但设太大（如 max-height: 1000px）会让动画末尾明显变慢。Sass 的作用是把这类判断提前到编译期。
- 定义一个 map：
$tab-types: ("text": "height", "media": "opacity transform") - 用
@each $type, $prop in $tab-types循环生成不同选择器，比如.tab--#{$type} .panel { transition: #{$prop} 0.3s ease; } - 别在
@if里判断运行时数据（比如用户点击了哪个 tab），那得交还给 JS；Sass 只管静态分类
IE 下 :target 不生效？补个 fallback class
IE9+ 支持 :target，但 IE8 及更早版本完全不认。如果项目还要兼容 IE8，就得用 class 模拟状态，比如 .tab-active，再靠 JS 切换——但 Sass 可以统一管理两套样式逻辑，避免重复写。
容易踩的坑是：写了两套规则却没加 specificity 权重区分，导致 IE 下 class 规则被现代浏览器的 :target 覆盖，或者反过来。关键不是“怎么兼容”，而是“怎么让两套规则不打架”。
- 把基础样式（颜色、padding 等）写在通用选择器里：
.tab-panel { ... } - 状态样式分两组：
.tab-panel:target, .tab-panel.tab-active { display: block; }—— 用逗号合并，确保权重一致 - 过渡动画也合并声明：
.tab-panel:target, .tab-panel.tab-active { animation: slideIn 0.2s; }，别拆成两个独立@keyframes
为什么不用 visibility: hidden 替代 display: none
因为 visibility: hidden 仍占文档流位置，标签页切换时如果内容高度变化，周围元素会突然跳动，用户体验比闪一下还糟。而 display: none 彻底移出渲染树，切换干净利落。
有人想用 opacity: 0 加 pointer-events: none 模拟隐藏，这在动画中可行，但对 SEO 和屏幕阅读器不友好——它们仍会读取 opacity: 0 的内容。真正的“隐藏”必须是 display: none 或 aria-hidden="true" 配合。
-
display: none是语义上“不存在”，适合标签页这种互斥内容 -
visibility: hidden是“看不见但还在”，适合 tooltip 悬停消失这种需要保留占位的场景 - 若真要用透明度动画，务必同步加
display: none在动画结束回调里（JS 控制），纯 CSS 无法监听transitionend
:target 都管不了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
