最常见原因是目标元素未设id或CSS漏写.tab-content:target规则；需确保.tab-content初始display:none、href与id严格匹配（大小写/连字符均需一致），且DOM已就绪。
点击标签没反应，:target方案根本不动
最常见原因是目标元素没设 id，或者 CSS 里漏写了 .tab-content:target 规则。浏览器不会报错，但内容就是不显示。
必须确保：
-
.tab-content初始状态为display: none，否则所有面板堆在一起 - 默认显示第一个，靠
.tab-content:first-of-type { display: block; }，但它会被:target覆盖——URL 带锚点时以锚点为准 - 链接的
href必须严格匹配目标id，比如href="#python"对应，大小写、连字符一个都不能错 - 别指望用
a:target高亮标签本身——:target只作用于被锚点指向的元素，不是链接
radio方案切换了但内容区全黑或全显
本质是兄弟选择器失效或初始状态失控。radio 方案依赖 input:checked ~ .content 这类关系，DOM 结构一松动就断链。
检查这几点：
-
必须和对应紧邻，且name属性完全一致，否则无法互斥 - 内容区要用
~（通用兄弟选择器），不能用+（相邻兄弟），因为中间可能插了其他元素 - 所有内容区初始必须统一设
display: none，不能靠 JS 或 class 控制显隐，否则首屏会闪 - 默认选中项只能有一个
checked，且它对应的label要放在那个input后面，否则点击无响应
innerHTML 写入 HTML 标签后原样显示，不解析
比如你写了 el.innerHTML = '加粗'，结果页面上真出现了 加粗 这串文字——说明浏览器把它当纯文本渲染了。
原因几乎总是以下之一：
- 误用了
textContent或innerText，它们只接受文本，不解析标签 - 元素还没挂载到 DOM，比如对
document.createElement('div')设了innerHTML，但没插入页面 - 字符串里有非法嵌套，如
'，浏览器容错后删掉了'hello
- CSP 策略拦截，控制台会报
Refused to set innerHTML
样式生效但切换动画卡顿或无效
:target 下 opacity 或 transform 过渡完全不触发，这是浏览器限制，不是你写错了。而 radio 方案虽然支持 transition，但容易踩两个坑：
- 没给内容区设
height或max-height，只靠opacity淡入淡出，会导致布局跳动 - 用
display: none/block切换，CSS 动画在display变化时直接中断，必须改用visibility+opacity或max-height+overflow - 移动端 hover 方案彻底失效，且不满足无障碍要求，别在线上环境用
实际项目里最容易被忽略的是：ID 匹配必须 100% 一致，包括大小写、连字符、前后空格；还有就是所有方案都依赖 DOM 已就绪——脚本执行早于元素挂载，一切都会静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
