::target-text 不是标准伪元素，目前未被任何主流浏览器支持；实际可用的是 :target 伪类，仅匹配 url 中 #id 对应的整个元素，无法高亮其中某段文本。
::target-text 不是标准 CSS 伪元素，目前（2026年9月）不存在这个语法，所有主流浏览器都不支持 ::target-text。
你真正能用、且已广泛支持的是 :target 伪类——它只匹配整个目标元素（即 URL 中 #id 对应的具有该 id 属性的元素），不能只高亮其中某段文本。
为什么搜到 ::target-text 可能是误解？
- 它曾出现在早期 CSS Selectors Level 4 草案中，作为实验性提议，用于高亮页面内被 URL 片段（如
#:~:text=xxx）定位到的文本范围； - 但截至 2026 年，该特性仍处于 “at-risk” 状态，未被 Chrome/Firefox/Safari 稳定实现，也未进入正式推荐标准；
- 当前唯一实际生效的文本片段定位机制是 Chrome/Edge 的
#:~:text=...URL 格式，但它仅触发浏览器原生高亮（黄色背景+深色文字），无法用 CSS 自定义样式。
实际可用的替代方案
✅ 用
:target高亮整个块级容器
例如：h2:target { background: #fffbcc; padding: 2px 4px; }
这是最可靠、全现代浏览器支持的方式。-
✅ 配合
#:~:text=...做辅助定位（仅视觉提示，不可控）
用户点击带#:~:text=关键词的链接时，Chrome 会自动滚动并高亮匹配文本，但：- 无法修改高亮颜色或样式
- Safari 和 Firefox 不支持该语法（Safari 17+ 仅部分支持，无高亮）
- 不能与
:target混用——:target仍只认id，不响应#:~:text
❌ 不要尝试写
::target-text { color: red; }
浏览器会直接忽略整条规则，开发者工具里看不到任何效果。
容易踩的坑
- 把
#:~:text=FAQ当作锚点去配div#FAQ:target→ 不生效，因为:target不感知#:~:text - 在 Vue/React 中动态生成
id后，期望#:~:text=...触发:target→ 两者完全无关，且#:~:text不触发 DOM 事件或 class 变更 - 用 PostCSS 或插件“模拟”
::target-text→ 目前无成熟方案，纯 JS 实现成本高、性能差、破坏可访问性
真正需要文本级高亮控制时，只能靠 JavaScript 定位 DOM 文本节点并包裹 <mark></mark> 或添加 class。CSS 本身对此无解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
