CSS如何选中当前活动的锚点目标_利用:target伪类制作站内Tab切换-css教程-PHP中文网

:target伪类实现Tab切换需满足三个硬性条件：URL含#id片段、页面存在对应id元素、二者严格大小写一致；否则样式完全不生效。

css如何选中当前活动的锚点目标_利用:target伪类制作站内tab切换

:target 伪类能实现纯 CSS Tab 切换，但必须满足三个硬性条件：URL 有 #id 片段、页面存在对应 id 的元素、且两者严格大小写一致；缺一不可，否则样式完全不生效。

为什么点击 Tab 后内容没显示？:target 不匹配的典型原因

最常见的是 HTML 结构没对齐。:target 只认 id，不认 class、data-id 或 name。比如链接是 href="#tab2"，那目标容器必须是

，写成  就失效。
URL 中是 #Tab2，但元素 id="tab2" → 大小写不一致，不匹配
页面通过 JS 动态插入 Tab 面板，但插入时漏了 id 属性 → 首次跳转找不到目标，滚动失败
多个元素用了同一个 id（如重复 id="tab1"）→ 行为未定义，Chrome 可能选第一个，Firefox 可能忽略
使用了 HTML4 风格的  锚点 → 现代浏览器已不支持，:target 完全无视

如何让非激活 Tab 真隐藏又不影响可访问性？
直接用 display: none 虽然简单，但会从 DOM 流中移除元素，导致屏幕阅读器跳过、SEO 不收录、JS 获取不到 offsetHeight。更稳妥的做法是视觉隐藏：

用 visibility: hidden + position: absolute + left: -9999px：保持 DOM 存在、语义完整、尺寸可读
或用 opacity: 0 + pointer-events: none：适合需要淡入淡出动画的场景
避免对 :target 元素本身设 display: block，除非你全局重置过 display，它默认就是块级

:target 配合滚动定位时 scroll-margin-top 为何不起作用？
scroll-margin-top 必须写在 :target 元素自身上，不是父容器或 body。例如：
#tab1:target {
  scroll-margin-top: 64px;
}

如果写了 article :target { scroll-margin-top: 64px; }，多数浏览器不会生效——因为该属性只对被滚动到的那个具体元素起效。

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										

值推荐用 px 或 rem，别用 %（计算基准不明确）
Safari 14.1 以下版本不支持 scroll-margin-top，需降级用 JS 模拟偏移
若页面已设 *:target { scroll-margin-top: 0; }（某些 CSS reset 会这么干），必须显式覆盖掉

现代前端框架里 :target 还能用吗？
在 React、Vue 等默认启用 History API 的项目中，:target 基本失效——因为路由 URL 不带 #，比如 /about 而非 /#about。即使强制切到 hash 模式，也有两个现实问题：

SSR 首屏渲染时，服务端无法感知客户端 hash，:target 样式不会出现在初始 HTML 中，存在 FOUC（闪屏）
框架内部的 router.push 或 history.pushState 不触发原生 hashchange，:target 不响应
如果你坚持用，所有跳转必须走原生 ，不能用框架封装的 Link 组件

真正容易被忽略的是：:target 的样式权重和普通选择器一样，没有特殊加成。一旦被 .content #tab1 这类更具体的选择器覆盖，高亮就消失——得靠开发者工具看 computed styles 里是不是被 strikethrough 了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！