::target-text仅在支持文本片段的浏览器中生效，需配合URL中#:~:text=语法使用，不替代JS高亮，且受编码、格式、存在性及样式限制，Safari不支持，Firefox需v120+。
::target-text 只能在支持文本片段（text fragment）的浏览器中生效，且必须配合 URL 中的 #:~:text= 语法使用；它不能替代 JavaScript 实现的搜索高亮，也不响应手动选中文本或 DOM 查找。
URL 文本片段语法必须写对，否则 ::target-text 完全不触发
浏览器只在解析到合法的 #:~:text= 结构时才激活 ::target-text。常见错误包括：
- 漏写
~：写成#:text=xxx→ 不匹配，伪元素无效 - 未 URL 编码特殊字符：如中文、引号、逗号需用
%E5%A4%A9%E5%8D%97等编码，直接写“天南第一修士”会中断解析 - 前缀/后缀格式错误：正确是
#:~:text=前缀-,目标文本,-后缀，其中-是分隔符，不能省略或替换为其他符号 - 目标文本在页面中实际不存在（哪怕差一个空格或换行），高亮也不会出现
::target-text 样式能力有限，仅支持部分文本相关属性
它和 ::selection 类似，只能修改文字渲染层样式，无法影响布局或结构：
- ✅ 允许设置：
color、background-color、text-decoration、text-shadow、font-weight等 - ❌ 禁止设置：
display、margin、padding、width、height、transform—— 浏览器会静默忽略 - ⚠️ 注意：若同时定义了
::selection和::target-text，后者优先级更高，但两者互不影响触发条件
刷新页面后高亮消失，这不是 bug，是设计行为
文本片段高亮是导航态（navigation-triggered）而非渲染态（render-triggered）特性：
- 用户点击含
#:~:text=的链接进入页面 → 触发滚动 + 高亮 - 此时按 F5 刷新 → URL 仍带该片段，但高亮立即清除（Chrome、Edge 均如此）
- 原因：高亮依赖 navigation event，刷新后该事件已丢失，且规范未要求持久化
- 若需“刷新后仍高亮”，必须用 JavaScript 监听
hashchange或DOMContentLoaded，再手动 scroll + 插入标记元素
多个文本片段可分别样式化，但需用 :nth-of-type() 等间接控制
一个 URL 可包含多个 text= 参数，例如：#:~:text=foo&text=bar&text=baz，浏览器会高亮全部匹配项：
-
::target-text本身无索引参数，无法直接区分第几个匹配项 - 但可结合父容器 +
:nth-of-type()或相邻兄弟选择器做近似控制，例如：p:nth-of-type(2)::target-text { background: lime; } - 更可靠的方式仍是 JS：获取所有
document.querySelectorAll('body *')中包含目标文本的节点，再逐个加 class
真正容易被忽略的是兼容性边界：Safari 完全不支持 ::target-text（截至 2026 年 9 月），Firefox 仅从 v120+ 开始支持，且所有支持它的浏览器都要求启用「text fragments」实验性功能（Chrome 默认开启，Edge 需确认策略）。别把它当通用高亮方案用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
