::selection 无法用于搜索高亮，因其仅响应用户手动选中，不能被 JavaScript 触发；应使用 ::highlight() 配合 HighlightRange API 或 DOM 操作（如 <mark>）实现。
::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>才响应，且其::selection在 Firefox 中仍受限
想高亮搜索词？该用 ::highlight() 而不是 ::selection
::highlight() 是唯一标准方案，但它不是“开箱即用”的 CSS 功能，必须配合 JavaScript 的 HighlightRange API：
- 仅 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> 或带 class 的 <span>：
立即学习“前端免费学习笔记（深入）”；
- 用
String.prototype.replaceAll()+DOMPurify.sanitize()防 XSS（尤其处理用户输入的关键词） - 避免直接
innerHTML = str.replace(...)—— 会销毁事件监听器和表单状态 - 若高亮区域含 HTML 标签，需先遍历 text nodes，再对匹配文本切片包装，否则会破坏结构
- 性能敏感场景（如长文章全文搜索），考虑用
document.createTreeWalker替代递归childNodes
真正容易被忽略的点：很多人花时间调试 ::selection 在搜索组件里为何不生效，其实问题不在 CSS 写法，而在根本选错了技术路径——::selection 是给用户选中用的，不是给程序高亮用的。
