index.html怎样设置网页内容不被用户选中？

user-select: none 是最可靠、最主流的禁用文本选中方案，需配合 -webkit-、-moz-、-ms- 前缀确保兼容性，但对 <input>、<textarea> 等表单元素无效，须单独重置为 text 并加 !important。

user-select: none 是最可靠、最主流的方案，CSS 优先于 JavaScript，且兼容性已覆盖所有现代浏览器（Chrome 54+、Firefox 69+、Safari 15.4+、Edge 79+）。用 JS 拦截 selectstart 或设 onselectstart 只是补救手段，且在部分场景下会失效。

用 CSS 全局禁用选中（推荐）

直接在 styles.css 或 <style> 块中写：

* {  user-select: none;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;}

注意三点：

• * 选择器会影响所有元素，包括 <input> 和 <textarea> —— 如果页面有可编辑字段，必须单独重置：input, textarea { user-select: text; }
• -moz-none 是 Firefox 旧私有值，已废弃；现在统一用 none 即可
• 不要只写 user-select: none 而忽略前缀——虽然 Chrome/Firefox/Safari 当前都支持无前缀版本，但 Electron、某些 WebView 或老版 iOS Safari 仍依赖 -webkit-user-select

为什么不能只靠 JavaScript 拦截 selectstart

document.addEventListener('selectstart', e => e.preventDefault()) 看似简单，但存在明显缺陷：

立即学习“前端免费学习笔记（深入）”；

• 仅阻止鼠标拖选和双击，对键盘操作（如 Shift+→ 逐字扩展选区）无效
• 若用户先选中再触发事件（比如快速双击），可能漏拦截
• 若 CSS 已设 user-select: none，该事件根本不会触发——JS 成了冗余层
• 在 Shadow DOM 内部或 iframe 中需单独绑定，无法跨上下文自动生效

input 和 textarea 需要特殊处理

禁用全局选中后，<input type="text"> 里的文字也会被锁死，导致无法光标定位、无法编辑。正确做法是分层控制：

* { user-select: none; }input, textarea, [contenteditable] {  user-select: text !important;}

关键点：

• 必须用 !important 覆盖通配符规则，否则 input 仍继承 none
• [contenteditable] 用于富文本区域，同样需要放行
• 如果只想禁用某段文字（比如版权说明），更稳妥的是只给容器加类：.no-select { user-select: none; }，避免影响全局交互

调试时发现文字还能选中？检查这三处

常见失效原因不是代码写错，而是被更高优先级规则覆盖或遗漏：

• CSS 文件未正确加载，或 <link> 标签位置在 body 后面，导致样式未生效
• 某个组件库（如 Ant Design、Element Plus）自带 user-select: text 并用了 !important，压过了你的规则
• 页面内联样式（style="user-select: text"）或 JS 动态插入的 style 标签，优先级高于外部 CSS

真遇到顽固情况，打开开发者工具，在 Elements 面板里右键目标文字 → “Break on” → “attribute modifications”，看是否有脚本在运行时强行改了 user-select。