::selection 仅控制选中后样式，无法限制移动端长按选中；真正禁用需同时设置 user-select: none 及 -webkit-touch-callout: none。
::selection 不能限制移动端长按选中行为——它只负责选中后的样式渲染，不控制是否能被选中。真要限制长按触发的文本选择和菜单弹出，得用 user-select 和 -webkit-touch-callout。
为什么 ::selection 在移动端长按时基本失效
iOS Safari（至少到 16.x）对 ::selection 的支持极其有限：只识别 color，background-color 几乎无效，加了 -webkit- 前缀也没用。这不是你写错了，是浏览器本身不实现。Android WebView 表现略好，但仍有渲染延迟或背景色变灰的问题。
-
::selection是“选中后怎么画”，不是“让不让选” - 长按触发的是系统级 selection 状态，
::selection规则可能根本没机会匹配（尤其在伪元素、contenteditable或 Shadow DOM 内） - 移动端 Safari 不支持嵌套写法（如
.article p::selection中的p会被忽略），且不继承父级颜色设置，必须显式声明
user-select: none 才是真正禁用长按选中的关键
要阻止长按后出现蓝色高亮框、光标、文字拖拽点，核心是切断“可选中”能力：
- 必须加前缀：
-webkit-user-select: none（iOS ≤ 12.5 / Android Chrome ≤ 61）、-moz-user-select: none（Firefox Android） - 仅设
user-select: none不够，旧 WebView 可能直接忽略 - 如果父容器设了
user-select: none，子元素又写了user-select: text，那子元素仍可被选中——检查 computed styles 看最终值是不是text -
pointer-events: none不影响文本选择，别混用
典型安全写法：
body {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
input, textarea, [contenteditable] {
-webkit-user-select: text;
user-select: text;
}
还要关掉 iOS 长按时的“复制/搜索”气泡菜单
user-select: none 能阻止高亮和光标，但 iOS 仍可能在长按时调起系统菜单。必须补上：
-
-webkit-touch-callout: none：专用于禁用 Safari/iOS 的长按气泡菜单 - 这个属性和
user-select是互补关系，缺一不可 - 仅加
contextmenu事件拦截（e.preventDefault()）不可靠，原生菜单仍可能闪现
注意：伪元素生成的内容（如 ::before { content: "标题" }）不继承父级 user-select，需单独加 user-select: none。
移动端伪元素内容的特殊处理
用 ::before 或 ::after 生成的文字，默认可被长按选中，且不响应父级的 user-select: none：
- 必须显式给伪元素加样式：
::before { user-select: none; -webkit-user-select: none; } - 否则用户长按“标题”文字，照样会高亮、弹菜单
- 同理，
-webkit-touch-callout: none也要加在伪元素上才生效
复杂交互区域（比如卡片标题 + 图标 + badge）里混用伪元素和真实文本时，最容易漏掉这一条。
真正麻烦的不是写不对，而是你以为加了 ::selection 就算“处理完了”，结果真机一试，长按还是蓝框+气泡——因为从一开始就没动 user-select 和 -webkit-touch-callout 这两个开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
