bootstrap 5 的 user-select-none 类管用，但仅对普通文本元素生效，对 input、textarea、option 等原生表单控件无效；它封装了带全前缀的 user-select: none，兼容性稳定，但可能被更高优先级样式覆盖或子元素显式重置。
Bootstrap 5 的 user-select-none 类到底管不管用
管用，但只对普通文本元素生效，对 <input>、<textarea></textarea>、<option></option> 这类原生表单控件完全无效——不是 Bug，是浏览器规范行为。它本质就是封装了 user-select: none 及全部前缀，不带任何魔法。
为什么加了 user-select-none 还能选中文字
常见原因有这几个：
- 样式没落到目标元素上：比如给父容器加了
user-select-none，但文字在子<span></span>里，而该<span></span>自己写了user-select: text（第三方组件库常这么干） - 元素本身是
contenteditable="true"或input类型，CSS 层面直接被忽略 - 你用的是旧版 Safari（≤15.4）或某些 Android WebView，没加
-webkit-user-select: none前缀——但 Bootstrap 5 默认已包含，所以更可能是你覆盖了它的 CSS - 开发者工具里检查“Computed”标签页，发现
user-select值是auto或text，说明被更高优先级规则干掉了
和手写 CSS 相比，用 Bootstrap 的 user-select-none 有什么区别
几乎没有功能差异，但有三点实际影响：
- 它只声明了标准值
none，没用all或contain等实验性值，兼容性更稳 - Bootstrap 5 的源码里是按顺序写的：
-webkit-user-select→-moz-user-select→-ms-user-select→user-select，标准属性放最后，避免被前缀覆盖 - 它不作用于伪元素（如
::before），如果你的文字靠伪元素生成，得额外加.no-select::before { user-select: none; }
真正容易被忽略的细节
最麻烦的不是加不上，而是加了之后破坏交互链路：
-
user-select-none不阻止右键菜单，也不屏蔽双击，更不影响Tab键聚焦——如果按钮文字加了它，但又忘了确保button本身可聚焦、有role或aria-label，屏幕阅读器可能跳过 - 在 React/Vue 中用
class="user-select-none"动态切换时，若 DOM 节点复用（比如列表项），旧 class 可能残留，导致部分项失效 - 移动端 iOS Safari 上，长按
user-select-none元素仍可能触发系统菜单，需配合-webkit-touch-callout: none才能压住
