user-select 能禁用文字选中但有局限：仅对普通文本容器（如 div、p、span）有效，对 input、textarea 和 contenteditable 元素无效；标准值 none/text/all 中，contain 为实验性且无浏览器支持；需加前缀兼容各浏览器。
user-select CSS 属性到底能不能禁用文字选中
能，但不是所有浏览器都支持默认值，且 user-select 的行为在不同场景下差异明显——比如它对 input、textarea 无效，对被 contenteditable="true" 的元素也常失效。
真正起效的前提是：目标元素是普通文本容器（如 div、p、span），且未被表单控件或编辑逻辑接管。
哪些取值实际可用，各自有什么限制
user-select 的标准值有 none、text、all、contain，但只有前三个在主流浏览器中稳定可用：
-
none：禁止用户选中，但不影响focus或键盘操作；注意：它不阻止 JavaScript 调用select()或setSelectionRange() -
text：允许选中（默认行为），但若父元素设为none，子元素用text也无法绕过（继承不可逆） -
all：点击即全选该元素内所有文本（类似双击input效果），但仅在 Chrome/Firefox 有效，Safari 忽略
别用 contain —— 它是实验性值，目前无任何稳定版浏览器支持。
为什么加了 user-select: none 还能选中
常见原因不是写法错，而是被更高优先级规则覆盖，或触发了浏览器的“强制可选中”逻辑：
- 元素有
contenteditable="true"属性，此时user-select被忽略 - 用了
-webkit-user-select: none却漏掉-moz-user-select或user-select标准声明，导致 Firefox/新 Edge 不生效 - 父容器设置了
user-select: text，而你想禁用的子元素没显式重写，结果继承了可选中 - 鼠标事件被 JS 拦截（如
onselectstart返回false），但该方式已废弃，且和user-select共存时行为混乱
推荐的兼容写法和最小安全配置
要确保跨浏览器生效，必须同时声明带前缀和无前缀版本，并作用于具体目标元素（不建议全局 * { user-select: none }）：
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
特别注意两个易漏点：
- 如果目标是禁用某段内联文本（如
span），需确保它没有display: inline以外的布局干扰（例如vertical-align或浮动可能意外创建新层叠上下文，影响样式继承） - React/Vue 等框架中动态渲染的元素，要确认 class 确实挂载成功——有时开发者用
className={condition ? 'no-select' : ''}却忘了空字符串会保留原 class，导致样式冲突
真要彻底锁死选中行为，得配合 pointer-events: none（但这会让元素失去所有交互，慎用）；单纯防误选，user-select: none 加前缀就足够了——只是别指望它能对抗用户主动复制粘贴的意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
