css：禁止文本选中

羊城大主劦

已于 2023-02-21 17:13:08 修改

阅读量414

点赞数

分类专栏： css 文章标签：前端 css

于 2023-02-21 17:11:10 首次发布

版权

5 篇文章

订阅专栏

通过CSS的user-select属性，可以控制元素的文本是否可被用户选中。none值用于禁止选中，auto则是默认行为，可能根据浏览器和上下文有所不同。all允许全选，而contain限制选区在元素内部。此外，还可以通过在子元素上设置不同的user-select来覆盖父元素的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

禁止文本选中

 -webkit-user-select: none;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;

属性值	描述
none	元素及其子元素的文本不可选中。从 Firefox 21 开始，none 表现的像 -moz-none，因此可以使用 -moz-user-select: text 在子元素上重新启用选择。
auto	auto 的具体取值取决于一系列条件，具体如下：在 ::before 和 ::after 伪元素上，采用的属性值是 none；如果元素是可编辑元素，则采用的属性值是 contain；否则，如果此元素的父元素的 user-select 采用的属性值为 all，则该元素采用的属性值也为 all；否则，如果此元素的父元素的 user-select 采用的属性值为 none，则该元素采用的属性值也为 none；否则，采用的属性值为 text
text	用户可以选择文本。
all	在一个 HTML 编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。
contain	允许在元素内选择；但是，选区将被限制在该元素的边界之内。
element	非标准（IE 专有别名），与 contain 相同，但仅在 Internet Explorer 中受支持。

可复制尝试：

<p>你应该可以选中这段文本。</p>
<p style="user-select: none">你不能选中这段文本！</p>
<p style="user-select: all;">点击一次就会选中这段文本。</p>