在前端开发中，我们经常会遇到需要禁止页面文本被选中、禁止用户复制文本的场景，比如一些展示类页面、后台管理系统的操作区域等。通过css的user-select属性就可以直接实现这个功能，不需要额外编写JavaScript逻辑。
user-select属性说明
user-select是css3新增的一个属性，用于设置用户是否能够选中文本。它的常用取值有以下几种：
- none：文本不能被选中
- auto：默认值，文本可以被选中
- text：文本可以被选中
- all：当双击子元素或者上下文时，会选中该元素下的所有文本
要实现禁止文本被选中的效果，我们只需要将user-select设置为none即可。
基础实现代码示例
如果是要禁止整个页面的文本被选中，可以直接给body标签设置该属性：
/* 禁止整个页面文本被选中 */
body {
-webkit-user-select: none; /* Chrome/Safari/新版Edge */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* 旧版IE/Edge */
user-select: none; /* 标准语法 */
}
如果需要只禁止某个特定区域的文本被选中，可以给对应的元素添加样式：
/* 禁止类名为no-select的元素内文本被选中 */
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
对应的HTML结构如下：
<div class="no-select">
这个区域内的文本无法被选中，也无法复制
</div>
<div>
这个区域的文本可以正常选中和复制
</div>
兼容情况说明
由于user-select是css3的属性，不同浏览器有不同的前缀支持情况，上面的代码中已经包含了各浏览器的前缀写法，可以覆盖大部分主流浏览器。如果需要兼容更老的浏览器，可能需要配合JavaScript实现，但一般情况下上述css写法已经足够满足需求。
注意事项
虽然user-select: none可以禁止用户通过鼠标选中文本，但并不能完全阻止用户复制内容，有经验的用户仍然可以通过查看页面源码、使用开发者工具等方式获取文本内容。如果需要对内容做严格的防复制处理，还需要结合其他手段，比如内容加密、添加水印等。
另外，不要滥用这个属性，如果页面是普通的内容展示页，建议保留文本选中的功能，方便用户复制需要的内容，提升用户体验。
cssuser_selectnone禁止选中文本修改时间：2026-07-14 20:12:25