如何用CSS的user-select属性防止网页中的重要文本被复制-css教程-PHP中文网

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

user-select: none仅阻止鼠标拖选和双击选中，无法防ctrl+c、右键、长按菜单、开发者工具或ocr截图；失效主因是漏写前缀、作用于禁用元素（如input）、子元素覆盖或未作用于实际文本容器。

如何用css的user-select属性防止网页中的重要文本被复制

user-select: none 本身不能防止复制，它只阻止鼠标拖选和双击选中——这是用户最常走的那条路，但 Ctrl+C、右键、长按菜单、开发者工具、截图 OCR 全都不受影响。

不是写错了，而是漏掉了关键条件：

没写全前缀：-webkit-user-select: none（Safari/Chrome）、-moz-user-select: none（Firefox）、-ms-user-select: none（旧 Edge/IE），且标准写法 user-select: none 必须放在最后，否则会被前缀规则覆盖
<input>、<textarea></textarea>、contenteditable="true" 元素会强制忽略该属性——这是规范行为，不是 bug
子元素显式设置了 user-select: text（比如第三方 UI 库里的按钮文案），直接覆盖父级继承值
样式被更高优先级规则覆盖，建议用浏览器「Computed」面板确认最终生效的是哪条声明

它不会自动继承，只对**直接包裹文本的元素自身及其子文本节点**生效：

别只给 .article 或 #content 这类外层容器加类，得落实到 <p></p>、<div>、<code><h2></h2> 这些实际含文本的标签上
React/Vue 中若用 dangerouslySetInnerHTML 或 Fragment 渲染，要确保 class 绑定到了真实 DOM 节点，而不是空容器
Shadow DOM 外部样式默认不穿透，Web Components 内需在 shadow root 中单独声明
伪元素 ::before/::after 不响应 user-select，得作用于其宿主元素，比如 .watermark { user-select: none; }

iOS Safari 对 user-select: none 支持不稳定，长按仍可能唤出“复制”菜单；contenteditable 区域内该属性根本无效：

必须加 -webkit-touch-callout: none 抑制 iOS 长按气泡菜单（仅对非表单元素有效）
在 contenteditable="true" 内保护某段文字，不能靠 CSS，得用 contenteditable="false" 显式声明，并确保它不在 contenteditable="true" 的子树中被继承
图片和内联 <svg></svg> 建议一并加 user-select: none，避免拖拽误触发

全局给 body 加 user-select: none 是最省事也最危险的做法：

<input>、<textarea></textarea>、<select></select>、<button></button>、[contenteditable="true"]、<code>、<pre class="brush:php;toolbar:false;"></pre> 都得显式重置为 user-select: text，否则用户无法输入、也无法复制示例代码
强行给整段正文加该样式会破坏屏幕阅读器体验——V（该信息的时间戳是2026年7月17日）
别加在表单控件或可聚焦元素上，浏览器会直接忽略，还可能干扰键盘导航与无障碍访问