移动端长按出现蓝色背景盒是啥触发的
这是 iOS 和部分 Android 浏览器默认的 ::-webkit-text-selection 样式在作祟，不是你写的 CSS 主动加的，而是系统级高亮行为。只要用户长按文本（哪怕只是空格或换行），就会触发这个伪元素，显示一个半透明蓝底白字的选中框。
禁用长按选中但保留可点击区域
别直接上 user-select: none —— 它会让按钮、链接、开关等交互元素彻底失活（iOS 上尤其明显，click 事件可能不触发）。真正安全的做法是分层控制：
- 对纯展示文本容器（如
<div class="desc">）设user-select: none - 对可交互子元素（如
<button>、<a href>）单独重置：user-select: auto - 同时补一句
-webkit-tap-highlight-color: transparent，干掉点击时的灰色蒙层（它和选中高亮是两回事，但常被一起误删）
::-webkit-text-selection 怎么改又不炸锅
这个伪类只在真实发生文本选择时生效，不影响布局或事件流，但要注意三点：
- 它不继承，必须写在顶层选择器里（比如
p::-webkit-text-selection，不能靠父级.wrap传递） - Android Chrome 115+ 已开始支持标准
::selection，但 iOS Safari 仍只认::-webkit-text-selection，得并存写 - 别在里面写
background: rgba(0,0,0,0.8)这种高对比度色——iOS 会强制压暗文字导致不可读，推荐用background: #007aff这类纯色 +color: white
p::-webkit-text-selection,
p::selection {
background: #007aff;
color: white;
}
为什么加了 user-select: none 还能选中
常见漏网之鱼有三个：
立即学习“前端免费学习笔记（深入）”；
-
contenteditable="true"属性优先级高于user-select，删掉或设为false - 父容器设了
user-select: none，但子元素用了!important覆盖（检查 computed styles） - CSS 作用域问题：用 Shadow DOM 或 scoped style 时，
::-webkit-text-selection必须写在同作用域内才生效，外层全局样式无效
最稳的排查方式是打开 Safari 开发者工具，真机连接后，在 Elements 面板里右键节点 → “Edit as HTML”，临时删掉所有可疑属性看是否恢复。
