::selection 无法用于搜索高亮，因其仅响应用户手动选中，不能被 javascript 触发；应使用 ::highlight() 配合 highlightrange api 或 dom 操作（如 ）实现。

::selection 不能用于实现搜索高亮——它只响应用户手动选中文本的行为，无法被 JavaScript 触发或匹配关键词。

为什么 ::selection 对搜索无效？

搜索高亮是程序性行为：需要定位字符串、创建 DOM 范围、包裹或染色。而 ::selection 是交互性伪元素，仅在 用户真实拖选或双击选中时 激活，且浏览器禁止 JS 主动触发它（window.getSelection().selectNode() 不会激活 ::selection 样式）。

• 你写 document.querySelector('p').setSelectionRange(0, 5) → 不触发 ::selection
• 用 Range + Selection.addRange() → 只影响光标位置，不渲染 ::selection 样式
• 试图用 element.focus(); element.select() → <input> 和 <textarea></textarea> 才响应，且其 ::selection 在 Firefox 中仍受限

想高亮搜索词？该用 ::highlight() 而不是 ::selection

::highlight() 是唯一标准方案，但它不是“开箱即用”的 CSS 功能，必须配合 JavaScript 的 HighlightRange API：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 仅 Chrome 128+ / Edge 128+ 支持；Firefox 和 Safari 当前不支持（截至 2026 年 7 月）
• 必须显式注册：document.highlightRegistry.set('mysearch', new Highlight(range))
• CSS 必须写成全局规则：::highlight(mysearch) { background-color: #ffeb3b; color: #333; }
• 不能写成 .search-result::highlight(mysearch) —— 伪元素不接受嵌套选择器

兼容性 fallback：别硬套 ::selection，改用真实 DOM 操作

对需支持 Firefox、Safari 或旧版 Chrome 的项目，可靠做法仍是插入 <mark></mark> 或带 class 的 <span></span>：

• 用 String.prototype.replaceAll() + DOMPurify.sanitize() 防 XSS（尤其处理用户输入的关键词）
• 避免直接 innerHTML = str.replace(...) —— 会销毁事件监听器和表单状态
• 若高亮区域含 HTML 标签，需先遍历 text nodes，再对匹配文本切片包装，否则会破坏结构
• 性能敏感场景（如长文章全文搜索），考虑用 document.createTreeWalker 替代递归 childNodes

真正容易被忽略的点：很多人花时间调试 ::selection 在搜索组件里为何不生效，其实问题不在 CSS 写法，而在根本选错了技术路径——::selection 是给用户选中用的，不是给程序高亮用的。

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