CSS user-select 文本选择控制

user-select属性控制文本能否被选中：none(禁止选择/按钮/拖动)、auto(默认)、text(文本可选)、contain(选择在元素内不扩展)、all(一键全选)、与::selection伪元素配合样式 · 难度：入门 · +10XP

CSS user-select —— 控制文本能否被用户选中

默认情况下，网页上的文字都可以被鼠标选中。但对于按钮、图标、导航菜单等交互元素，被选中文字时会出现蓝色的选中高亮，影响体验。user-select让你精确控制哪些文字可选。

基本用法

.no-select { user-select: none; }      /* 禁止选中 */
.select-all { user-select: all; }      /* 一键全选 */
.select-text { user-select: text; }    /* 可选中（默认行为）*/
.select-auto { user-select: auto; }    /* 浏览器决定 */

实际应用

/* 按钮文字不可选 */
button, .btn { user-select: none; }
/* 代码块一键全选 */
.code-block { user-select: all; }

动手练习

1. 基础练习：给一款按钮设置user-select:none，对比设置前后点击按钮时文字是否会出现蓝色选中。
2. 进阶应用：做一个"点击复制"代码块——设置user-select:all让用户一键选中全部代码。
3. 项目实战：检查网站的按钮、图标、导航等所有交互元素，统一设置user-select:none防止意外选中。