::selection 仅控制已选中文本样式，无法禁用选择；禁用需用 user-select: none 并补全四前缀，且需为表单和可编辑元素显式重置。
::selection 不能禁用文本选择，它只控制选中后的样式。想禁用选中，必须用 user-select: none。
为什么::selection写得再全也禁不了选中
这是根本性误解：::selection 是在“文字已被成功选中后”才生效的样式钩子。如果用户根本点不中、拖不动、长按无反应，那这个伪元素压根不会触发——就像给没开火的炉子调火力一样。
常见错误现象包括：
- 写了
::selection { background: transparent; }却发现文字还是能被选中 - 在 DevTools 里看到
::selection规则灰掉、未生效 - 移动端长按弹出系统菜单，完全无视你的 CSS
user-select: none 怎么写才真正生效
单写 user-select: none 常常无效，因为浏览器前缀没补全，或被更高优先级规则覆盖。
必须同时声明四条（顺序无关，但缺一不可）：
立即学习“前端免费学习笔记（深入）”；
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
实操建议：
- 别只加在
body上——它会继承给所有子元素，包括<input>和<textarea>，导致用户无法编辑表单 - 对表单控件显式重置：
input, textarea, [contenteditable] { user-select: text; } - 用 DevTools 的 “Computed” 面板确认最终生效值，不是只看 Styles 面板里有没有这条规则
禁用选中后，::selection 还有必要写吗
有必要，但作用很窄：仅用于兜底旧版 Safari 拖选时的瞬时高亮残留。
比如你给敏感字段加了 user-select: none，但在某些 iOS Safari 版本中仍可能闪一下蓝底白字——这时可加：
.sensitive::selection {
background: transparent !important;
color: inherit !important;
}
注意两点：
- 必须加
!important，否则容易被用户代理样式或内联样式覆盖 - 别同时设
color: transparent，这会让屏幕阅读器读不到内容，违反可访问性
真正难的是边界控制，不是加一行 CSS
禁用选中从来不是技术难题，而是语义判断问题：同一张卡片里，“订单号 ORD-7X9F2”该禁选，“复制”按钮的文案却必须允许选中——这种混排场景下，靠 user-select: none 全局拦截只会让交互崩溃。
最容易被忽略的点是：没有为 [contenteditable="true"] 或自定义富文本容器单独放开 user-select: text，结果编辑区域光标失焦、输入法异常。这类细节往往要等 QA 在真机上点半天才暴露出来。
