怎样用CSS伪类:target实现无需JS的锚点高亮-css教程-PHP中文网

:target伪类可自动高亮URL fragment匹配的id元素，无需JS；前提为id与href严格一致（大小写、符号均需匹配），且DOM已挂载、无重复id、优先级足够，并用scroll-margin-top或::before避fixed遮挡。

怎样用css伪类:target实现无需js的锚点高亮

点击链接后如何让目标元素自动高亮

用 :target 伪类就能做到，它会在 URL 的 fragment（即 #xxx 部分）匹配到对应 id 元素时生效。不需要监听 hashchange、也不用写 JS 绑定 class —— 浏览器原生支持，兼容性到 IE9+。

关键前提是：目标元素必须有 id，且链接的 href 值严格对应（比如 href="#section2" →

）。大小写、空格、特殊字符都必须一致。:target 样式为什么没生效
常见失效原因不是语法错，而是语义或结构问题：


id 值含非法字符（如空格、中文、点号），浏览器可能静默忽略匹配 —— 只用字母、数字、下划线、短横线
页面加载时 URL 已带 #xxx，但对应 id 元素尚未渲染（例如在 Vue/React 的异步组件里）—— :target 不会重触发，只响应初始状态
样式被更具体的规则覆盖（比如 .content h2 比 h2:target 优先级高）—— 加 !important 是临时解法，推荐提升选择器特异性，如 h2[id]:target

使用了 display: none 的目标元素 —— :target 仍匹配，但视觉不可见；若想“显示+高亮”，得额外加 display: block


怎样避免滚动后高亮被遮挡
锚点跳转默认滚动到元素顶部，但固定头部（position: fixed）常把目标内容盖住。纯 CSS 解法是用滚动偏移：
/* 在目标元素前插入带 height 的空伪元素 */
:target::before {
  content: "";
  display: block;
  height: 60px; /* 等于 header 高度 */
  margin-top: -60px;
  visibility: hidden;
}
这个技巧依赖 ::before 的文档流占位和负 margin 拉回位置，不干扰布局，也无需 JS 计算 offsetTop。

											
												
												
													Expanso yaml-to-json
													使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。
												
												下载
												
											
										
能否对多个元素同时应用 :target 效果
不能 —— :target 每次只匹配一个元素（URL 中只能有一个 fragment）。但可以曲线实现“多区域高亮”：

用多个独立锚点链接分别指向不同 id，各自定义 :target 样式
如果需要“同一链接触发多个高亮”，得靠 JS；CSS 无原生方案
注意：若页面存在多个相同 id（HTML 非法但偶有发生），:target 行为未定义，多数浏览器只匹配第一个

真正容易被忽略的是 fragment 的生命周期 —— 它不会因为用户滚动而消失，也不会因 JS 修改 location.hash 而自动更新样式（除非触发导航）。所以别指望它做动态交互反馈，它只忠于当前 URL 的 hash 值。

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