user-select: none 在现代 Chrome、Firefox、Safari、Edge（Chromium）中支持标准写法，旧版 Safari 和 Edge 需加 -webkit- 和 -ms- 前缀，IE10+ 支持 -ms-user-select，IE9 及更早不支持。
user-select 属性在哪些浏览器中能用
user-select 是 CSS 3 中的非标准但已广泛支持的属性，用于控制用户是否能选中元素内的文本。现代 Chrome、Firefox、Safari、Edge（基于 Chromium）都支持标准写法 user-select: none；但旧版 Safari 和旧 Edge 需要前缀：-webkit-user-select 和 -ms-user-select。
IE10+ 支持 -ms-user-select，而 IE9 及更早版本完全不支持——如果必须兼容 IE9，得靠 JS 拦截 selectstart 事件，但效果有限且不可靠。
如何正确设置 user-select: none
直接写 user-select: none 并不能“递归”禁用子元素的文本选择，它只作用于当前元素及其直接文本内容。如果子元素显式设置了 user-select: text 或 auto，就会覆盖父级的 none。
- 要彻底禁用一整块区域（比如一个卡片容器），需对容器和所有可能含文本的子元素统一设为
user-select: none - 若只想禁用某段文字（如按钮文案），直接加在对应
<span></span>或<button></button>上即可 - 慎用在
<input>、<textarea></textarea>上——虽然语法合法，但会破坏用户编辑体验，多数情况下不应这么做
常见失效原因：继承与层叠冲突
最常遇到的问题是：明明父容器写了 user-select: none，但里面一段 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 还是能被选中。这通常是因为：
立即学习“前端免费学习笔记（深入）”；
- 子元素 CSS 中有更具体的规则覆盖了父级设置，比如
p { user-select: text; } - 使用了伪元素（如
::before）生成的内容，默认可选，需单独设user-select: none - 某些框架（如 Ant Design、Element Plus）组件内部有内联样式或高优先级 class，会绕过你的全局设置
- Chrome DevTools 里看到属性“划掉”（strikethrough），说明被更高优先级规则覆盖，得检查 computed 样式来源
移动端 Safari 的特殊表现
iOS Safari 对 user-select 的支持存在两个隐藏坑：
- 当元素有
touchstart事件监听器时，即使设了user-select: none，长按仍可能触发系统选中菜单（尤其在<div> 上） <li>配合 <code>-webkit-tap-highlight-color: transparent使用可减少误触发，但无法 100% 消除 - 若目标是防止误操作（比如防止手滑选中文本干扰点击），建议优先用
pointer-events: none+ 单独包裹可点区域，而不是强依赖user-select
真正需要禁用选中的场景其实不多，比如代码展示块、UI 控件标签、防截图文案等。多数时候，用户能选中文字反而是友好表现——别为了“看起来干净”而一刀切关掉。
