::target-text仅在chrome 89+/edge 89+中生效，用于高亮url中#:~:text=指定的精确匹配文本，支持color等文本样式但不支持布局属性，且刷新后高亮消失。
::target-text 只在浏览器支持滚动到文本片段（scroll-to-text）时生效，且仅能设置文字样式；它不替代 :target，也不能高亮任意元素，只作用于 URL 中 #:~:text=... 指定的匹配文本。
为什么 ::target-text 样式没出现
最常见原因是浏览器不支持该特性（Chrome 89+、Edge 89+ 支持，Firefox 和 Safari 当前不支持），或 URL 格式错误。检查以下几点：
- URL 必须含
#:~:text=结构，例如https://example.com/#:~:text=天南第一修士；#section1这类传统锚点无效 - 目标文本必须在页面中**真实存在且完全一致**（包括空格、标点、全半角、大小写），不能是 JS 动态插入后才渲染的内容
- 若文本被
display: none或visibility: hidden隐藏，::target-text 不会触发 - 用 Chrome DevTools 的 Elements 面板搜索
::target-text，看 Computed Styles 中是否列出该规则——没出现说明未命中
::target-text 能改哪些样式
它和 ::selection 类似，仅允许修改与「选中文本」语义一致的属性，浏览器会忽略其他声明：
- 支持：
color、background-color、text-decoration、text-shadow、font-weight等纯文本渲染相关样式 - 不支持：
padding、margin、border、transform、display、width等影响布局的属性 - 即使写了
!important，不支持的属性依然无效
示例有效写法：
::target-text { background-color: #ffcc00; color: #333; text-decoration: underline; }
如何让多个不同 text 片段用不同高亮色
URL 支持多个 text= 参数（用逗号分隔），但 ::target-text 无法区分它们——所有匹配文本统一应用同一套样式。如需差异化，只能靠 JS 动态注入 class 或改用 :target + ID 锚点组合：
- 若链接是
#:~:text=错误,提示，两个词都会套用同一个::target-text规则 - 想让“错误”红底、“提示”蓝底？原生 CSS 做不到；得把“错误”包进
<span id="err">错误</span>，再用#err:target { background: red; } - 注意：::target-text 和 :target 可共存，但互不影响——前者只管文本片段，后者只管 ID 元素
刷新后高亮消失是正常行为
这是该特性的固有限制：文本锚点高亮仅在**首次导航进入页面时触发**，刷新后浏览器不会重新解析 #:~:text= 并重绘高亮。用户点击链接进来能看到，F5 刷新就没了。这不是 bug，是规范设计如此。
如果业务强依赖持久化高亮，必须放弃 ::target-text，改用 JS 监听 hashchange + 正则查找并包裹 DOM 节点，再加 class 控制样式——但这就脱离了纯 CSS 方案的初衷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
