移动端 Safari 和部分 Android 浏览器对 ::selection 支持有限，iOS 长期限制背景色与文字颜色；需用 ::-webkit-selection + ::selection 双声明、确保可选中状态、字体不小于 16px，并注意 DOM 修改风险。
移动端 Safari 和部分 Android 浏览器对 ::selection 的支持有限，尤其在 iOS 上长期不支持自定义背景色和文字颜色（仅允许部分浅色系，且常被系统强制覆盖）。单纯写 ::selection 在很多真机上确实不生效，这不是你代码写错了，而是浏览器限制。
✅ 优先使用 WebKit 前缀 + 标准写法双保险
虽然 CSS 规范已标准化 ::selection，但 iOS Safari（截至 iOS 17）仍主要识别 ::-webkit-selection，且必须同时声明两者才能覆盖更多场景：
::-webkit-selection {
color: #fff;
background-color: #007aff;
}
::selection {
color: #fff;
background-color: #007aff;
}
注意：iOS Safari 对 background-color 有严格限制——仅当文本处于可编辑/可选中状态（如 <p>、<div contenteditable> 或表单内）且未被系统 UI 干预时才可能生效；纯静态 <div> 在某些版本中仍会回退为默认蓝底。
✅ 确保元素本身允许用户选择
以下情况会导致 ::selection 完全失效，需逐一排查：
立即学习“前端免费学习笔记（深入）”；
-
父级设置了
-webkit-user-select: none或user-select: none—— 子元素即使单独设text也无法触发选择样式 -
元素是
<input>或<textarea>以外的表单控件（如<button>），其内部文本选择行为由系统控制，CSS 无法干预 -
页面启用了
touch-action: manipulation或禁用长按菜单（如某些 H5 框架默认配置），会阻止文本选择触发
✅ 替代方案：用 JavaScript 模拟高亮效果（可控性强）
当 CSS 不可靠时，可监听 selectionchange 事件，动态包裹选中文本并添加 class：
document.addEventListener('selectionchange', () => {
const selection = window.getSelection();
if (!selection.rangeCount || selection.toString().trim() === '') return;
const range = selection.getRangeAt(0);
const span = document.createElement('span');
span.className = 'custom-selection';
span.style.cssText = 'color: #fff; background: #007aff;';
range.surroundContents(span);
});
⚠️ 注意：该方式会修改 DOM 结构，需配合撤销逻辑（如监听 blur 或点击空白处还原），适合对体验要求高、且文本非频繁更新的场景（如文章阅读页）。
✅ iOS 特别提醒：字体大小影响是否触发选择样式
iOS Safari 对小于 16px 的字体默认禁用文本选择（防止误触），若你的文字设置了 font-size: 14px，即使其他条件都满足，::selection 也不会出现。解决方法：
- 确保目标文本
font-size ≥ 16px（或使用-webkit-text-size-adjust: 100%防止缩放干扰） - 给容器加
-webkit-tap-highlight-color: transparent，避免点击高亮覆盖选择效果
