::selection 仅控制选中后样式，无法限制移动端长按选中；真正禁用需同时设置 user-select: none 及 -webkit-touch-callout: none。
不能限制移动端长按选中行为——它只负责选中后的样式渲染，不控制是否能被选中。真要限制长按触发的文本选择和菜单弹出，得用
和
。
为什么
在移动端长按时基本失效
iOS Safari（至少到 16.x）对
的支持极其有限：只识别
，
几乎无效，加了
前缀也没用。这不是你写错了，是浏览器本身不实现。Android WebView 表现略好，但仍有渲染延迟或背景色变灰的问题。
是“选中后怎么画”，不是“让不让选”
长按触发的是系统级 selection 状态，
规则可能根本没机会匹配（尤其在
伪元素
、
或 Shadow DOM 内）
移动端 Safari 不支持嵌套写法（如
中的
会被忽略），且不继承父级颜色设置，必须显式声明
才是真正禁用长按选中的关键
要阻止长按后出现蓝色高亮框、光标、文字拖拽点，核心是切断“可选中”能力：
必须加前缀：
（iOS ≤ 12.5 / Android Chrome ≤ 61）、
（Firefox Android）
仅设
不够，旧 WebView 可能直接忽略
如果父容器设了
，子元素又写了
，那子元素仍可被选中——检查 computed styles 看最终值是不是
不影响文本选择，别混用
典型安全写法：
还要关掉 iOS 长按时的“复制/搜索”气泡菜单
能阻止高亮和光标，但 iOS 仍可能在长按时调起系统菜单。必须补上：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
：专用于禁用 Safari/iOS 的长按气泡菜单
这个属性和
是互补关系，缺一不可
仅加
事件拦截（
）不可靠，原生菜单仍可能闪现
注意：伪元素生成的内容（如
）不继承父级
，需单独加
。
移动端伪元素内容的特殊处理
用
或
生成的文字，默认可被长按选中，且不响应父级的
：
必须显式给伪元素加样式：
否则用户长按“标题”文字，照样会高亮、弹菜单
同理，
也要加在伪元素上才生效
复杂交互区域（比如卡片标题 + 图标 + badge）里混用伪元素和真实文本时，最容易漏掉这一条。
真正麻烦的不是写不对，而是你以为加了
就算“处理完了”，结果真机一试，长按还是蓝框+气泡——因为从一开始就没动
和
这两个开关。
::selectionuser-select-webkit-touch-callout::selection::selectioncolorbackground-color-webkit-::selection::selectioncontenteditable.article p::selectionpuser-select: none-webkit-user-select: none-moz-user-select: noneuser-select: noneuser-select: noneuser-select: texttextpointer-events: nonebody {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
input, textarea, [contenteditable] {
-webkit-user-select: text;
user-select: text;
}user-select: none-webkit-touch-callout: noneuser-selectcontextmenue.preventDefault()::before { content: "标题" }user-selectuser-select: none::before::afteruser-select: none::before { user-select: none; -webkit-user-select: none; }-webkit-touch-callout: none::selectionuser-select-webkit-touch-callout