直接写style="user-select: none;"通常无效，因其不继承、易被覆盖，且缺少-webkit-等必要前缀；表单控件、移动端及contenteditable元素会强制忽略该声明，必须补全四前缀并针对性处理交互与可访问性。
直接写 style="user-select: none;" 通常无效，尤其在表单控件或移动端——它不是开关，而是受继承、覆盖和浏览器策略制约的样式声明。
为什么 style="user-select: none;" 经常不生效
常见错误现象：加了内联样式，但 <input> 仍能双击选中、iOS 长按弹出“复制”菜单、Vue 中 class 切换后没反应。
-
user-select不继承，父元素设了，子元素（尤其是<input>、<textarea></textarea>）不会自动跟随 - 表单控件有用户代理样式默认设
user-select: text，会直接覆盖内联的none - 缺少前缀：
-webkit-user-select: none在 Safari/iOS 必须存在，否则基本无效 -
contenteditable="true"或pointer-events: none会让该属性彻底失效
内联 style 中必须写的四行前缀
只写 user-select: none 是懒惰写法，生产环境必须补全：
style="-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;"
注意顺序无关紧要，但缺一不可。Safari 14.0 及更早、Android 6 以下设备只认 -webkit-；Firefox 旧版本依赖 -moz-；IE10+ 需要 -ms-。
哪些地方适合用内联 style 禁选，哪些绝对不该
内联方式适合局部、动态、条件性控制，比如 React/Vue 中根据状态切换：
- ✅ 适合：
<span class="chip-text"></span>、带role="button"的静态文案、图标旁的状态标签（如 “已发布”） - ❌ 不适合：
<input>、<textarea></textarea>、正文段落、普通链接文字（除非是 icon-only 按钮且已配aria-hidden="true"） - ⚠️ 特别注意：表格列头若支持排序，加了会断开点击高亮反馈；按钮文字加了但没处理键盘焦点（
tabindex、Enter响应），会损害可访问性
React/Vue 中用内联 style 的坑
JSX 或模板里写 style={{ userSelect: 'none' }} 看似简洁，但实际容易翻车：
- SSR 渲染时可能被忽略，服务端没生成对应样式，首屏仍可选
- Vue 中用
v-show切换样式无效（display: none不移除内联 style），得改用v-if或确保响应式数据真实变化（比如用ref而非普通对象属性） - React 中若子组件是富文本渲染器（如 Tiptap），DOM 可能没重绘，样式不生效；可加
key={isSelectable.toString()}强制刷新
真正难的不是写对这四行 CSS，而是判断该不该禁、在哪禁、禁完是否还保得住交互和无障碍——这些没法靠 style 属性自动解决。
