Bootstrap 5 中不存在 user-select-all 辅助类，仅支持 user-select-auto、user-select-none 和 user-select-text；实现点击全选需用 JavaScript 调用 getSelection() 与 Range.selectNodeContents()。
user-select-all 在 Bootstrap 5 中并不存在
bootstrap 5 官方 css 辅助类里没有 user-select-all。你看到的可能是自定义样式、旧版 bootstrap 4 的残留写法，或是其他框架混用导致的误解。官方只提供了 user-select-auto、user-select-all（注意：这是错觉）、user-select-none 和 user-select-text —— 实际上，user-select-all 并未被 bootstrap 5 实现。
真正可用的 user-select 辅助类只有三个
Bootstrap 5 支持的 user-select-* 类仅限以下三种：
-
user-select-auto：使用浏览器默认行为（user-select: auto） -
user-select-none：禁止选中（user-select: none），常用于按钮、图标等交互元素 -
user-select-text：强制允许文本选中（user-select: text），适用于禁用区域中需保留文字复制的场景
想实现“点击后全选该元素内文字”，不能靠辅助类一步到位——CSS 本身不提供“点击即全选”的行为，必须配合 JavaScript。
实现点击全选文字的正确方式
核心思路是监听点击事件，调用 document.execCommand('selectAll')（已废弃但仍广泛兼容）或更现代的 window.getSelection() + Range.selectNodeContents()。推荐后者：
function selectText(element) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
// 使用示例：给一个 <div class="click-to-select">...</div>
document.querySelectorAll('.click-to-select').forEach(el => {
el.addEventListener('click', () => selectText(el));
});
注意事项：
- 确保目标元素是可聚焦或有明确文本内容的容器（如
<p>、<div>），空元素或display: none元素无法选中 - 避免在
contenteditable="true"或input/textarea上直接用此逻辑，它们有原生select()方法 - 若元素含子标签（如
<span>、<strong>），selectNodeContents()仍能选中全部文本，但光标位置可能偏移
为什么别硬凑 user-select-all 类名
有人会手动加个 .user-select-all { user-select: all; }，但这解决不了“点击全选”问题——user-select: all 只表示「双击时整块选中」，不是「单击触发全选」，且该值在 Firefox 中不支持（仅 Chrome/Edge 支持），存在兼容性断裂。
真正需要的是行为控制，不是选择策略声明。混淆这两者，容易在移动端点透、焦点管理、屏幕阅读器兼容上出问题。
最易被忽略的一点：全选操作应有视觉反馈（比如临时加 outline 或背景色），否则用户无法确认是否生效；而这个反馈，得靠 JS 控制 class 切换，CSS 辅助类本身做不到。
