直接在元素上写style="user-select: none;"即可生效，但该属性不继承，子元素需单独设置；表单控件如默认重置该值，必须显式覆盖，且contenteditable="true"或pointer-events: none会使其失效。
user-select属性在HTML中怎么写才生效
直接在元素上加 style="user-select: none;" 就能禁用文字选中，但要注意它不继承，子元素不会自动跟着禁用。
常见错误是只给父容器设了 user-select: none，结果里面的 <input> 或 <textarea></textarea> 还能被选中——因为这些表单控件默认会重置自己的 user-select 值。
- 必须显式给需要禁用的元素（或其所有可交互子元素）单独设置
- 若要全局禁用，建议用 CSS 通配符：
* { user-select: none; }，但要小心影响表单输入框体验 - 部分浏览器（如旧版 Safari）需要加前缀：
-webkit-user-select: none;
哪些场景下user-select: none会失效
最典型的是元素有 contenteditable="true" 属性，或者本身是原生可编辑控件（<input>、<textarea></textarea>），此时 user-select: none 被强制忽略。
另一个容易被忽略的情况：元素设置了 pointer-events: none。虽然看起来“点都点不了”，但它同时让浏览器跳过该元素的选中逻辑，导致 user-select 根本没机会起作用——这不是失效，而是压根没进入选中流程。
-
user-select: none对<select></select>下拉选项无效 - 在 iframe 内部需在 iframe 文档里单独设置，父页面样式无法穿透
- 使用 JavaScript 动态插入的内容，需确保插入后样式已应用（比如用
getComputedStyle检查是否被覆盖）
兼容性与跨浏览器写法怎么写才稳妥
现代浏览器基本都支持标准 user-select，但 iOS Safari 15.4 之前、Android WebView 旧版本仍需 -webkit-user-select；Firefox 早期版本曾用 -moz-user-select，现在已无需。
推荐最小兼容写法：
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
注意：不要写 -ms-user-select（IE 已淘汰，Edge 新版本也不再需要）；-o-user-select 是 Opera Presto 时代遗留，早已无必要。
用JavaScript动态控制user-select更灵活的方案
纯 CSS 无法按条件开关（比如只在预览模式下禁用），这时用 JS 更可控。关键不是改 style.userSelect，而是避免内联样式污染，推荐切换 class：
element.classList.add('no-select');
// 或
element.classList.toggle('no-select', shouldDisableSelection);
如果必须用内联样式，注意浏览器前缀需同步设置：
-
element.style.userSelect = 'none'在 Chrome/Firefox/Edge 有效 - 但 Safari 需额外补一句：
element.style.webkitUserSelect = 'none' - 别忘了清除时也要清掉两个值，否则 Safari 可能残留
真正麻烦的不是加禁用，而是「什么时候该恢复」——比如用户点击一个按钮后临时禁用，但焦点移入输入框时必须立刻放行，这类边界逻辑比样式本身更易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
