禁用文本选择必须用user-select: none而非::selection；后者仅控制已选中文本样式，且需全前缀兼容各浏览器，作用域须精准避免影响表单控件。
::selection 不能禁用文本选择，它只负责选中后的样式；真正禁用选择必须用 user-select: none。
为什么::selection加background: transparent没用
因为 ::selection 只在文字被成功选中后才生效。如果父容器或自身已设 user-select: none，选中行为被拦截，::selection 根本不会触发——你写的规则压根不运行。
- 常见误操作：给
body或大块div加user-select: none，结果连input都无法选中文本 - 试图靠
.sensitive::selection { background: transparent; color: inherit; }“隐藏”高亮，但旧版 Safari 拖动时仍可能闪出默认蓝底白字 -
transparent在background-color中不可靠：Safari 会退回到系统默认色，不是真“禁用”
user-select: none 必须带全前缀且精准作用域
只写 user-select: none 在 Safari、Firefox、旧版 Edge 里大概率失效。
- 必须同时声明：
-webkit-user-select: none、-moz-user-select: none、-ms-user-select: none、user-select: none - 不能全局一刀切：
body { user-select: none }会锁死所有表单控件，必须显式重置：input, textarea, [contenteditable] { user-select: text; } - 敏感字段建议用语义化类名包裹，比如
<span class="masked-id">ABCD-1234</span>，再配 CSS 规则，避免影响周边可操作文案
移动端和暗色模式下的真实限制
iOS 长按时弹出的系统级选择菜单（含“复制”“搜索”等按钮）完全无视 ::selection 和 user-select，背景固定为浅灰，CSS 无解。
立即学习“前端免费学习笔记（深入）”；
-
<input>和<textarea>基本不响应自定义选中色，Chrome 99+ 对textarea有极有限支持，但不可依赖 - 暗色模式下，若页面背景是深色而
user-select: none没加!important，某些浏览器仍会继承父级color导致视觉异常 - Shadow DOM 或 Vue 的
<style scoped>会隔离::selection，规则需注入<head>或用injectGlobal（如 Emotion）
真正难的不是写对一行 CSS，而是判断哪些字段确实该禁选、哪些必须保留可选性，同时不让屏幕阅读器和键盘用户掉链子——user-select: none 不是开关，是需要配合 tabindex、aria-label 和服务端校验的防护环节。
