user-select: all 仅改变光标和文本可选性，不自动触发全选；真正实现点击全选必须依赖 JavaScript 的 select() 或 setSelectionRange() 方法，并确保元素已聚焦。
user-select: all 本身不触发选中行为，只是改变光标和文本可选性
很多人以为 user-select: all 一设，点击就自动全选文字——其实不是。它只让浏览器在点击时把整个元素内容当做一个“可选单元”，但是否真正触发选中、选中范围多大，取决于元素类型和用户交互方式。
关键点在于：user-select: all 必须配合可聚焦/可交互的容器（如 <div contenteditable="true"> 或 <input>/<textarea>），纯静态 <div> 即使设了也不会响应点击选中。
- 对
<input type="text">或<textarea>：设user-select: all后，单击会全选内容（Chrome/Firefox 支持，Safari 需额外处理） - 对普通
<div>：即使加了user-select: all，点击也不选中——因为默认不可编辑、不可聚焦，浏览器不启动选择逻辑 -
::selection伪元素只控制高亮样式，完全不影响选中行为，别指望它“驱动”全选
想让 div 点击全选？必须用 JavaScript 模拟，CSS 做不了
CSS 没有“点击即全选”的声明式能力。::selection 只能改颜色、背景，user-select: all 只是降低选择门槛——真要实现点击全选，得靠 select() 或 setSelectionRange()。
典型做法是给 <div contenteditable="true"> 绑定 click 事件，再调用原生方法：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<div contenteditable="true" class="selectable" style="user-select: all;">Hello world</div>
<script>
document.querySelector('.selectable').addEventListener('click', (e) => {
const el = e.target;
if (el.tagName === 'DIV' && el.isContentEditable) {
el.focus();
const range = document.createRange();
range.selectNodeContents(el);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
});
</script>
- 不能只靠
el.select()—— 它只对<input>/<textarea>有效 - 必须先
focus()，否则getSelection()可能返回空或旧范围 - Safari 对
contenteditable的selectNodeContents支持较弱，建议 fallback 到execCommand('selectAll')（已弃用但 Safari 仍需）
input/textarea 上 user-select: all 的兼容性陷阱
在表单控件上设 user-select: all 看似简单，但各浏览器行为不一致：
- Chrome：单击 input 内任意位置 → 全选；双击 → 选中单词；三击 → 全选（与未设该属性时相同，
user-select: all实际没改变行为） - Firefox：单击 input → 全选（生效）；但若 input 有
readonly，部分版本会失效 - Safari：默认单击不全选，必须显式调用
input.select()，user-select: all几乎无效果
所以生产环境别依赖 CSS 行为，统一用 JS：
<input type="text" value="Click to select all" id="myInput">
<script>
document.getElementById('myInput').addEventListener('click', (e) => {
e.target.select(); // 安全、跨浏览器、无需判断
});
</script>
::selection 伪元素只能美化，别让它干扰逻辑判断
::selection 常被误认为“选中状态”的钩子，但它既不触发事件，也不能检测是否被选中。它的唯一作用是定义被选中时的样式：
<style>
.selectable::selection {
background: #007bff;
color: white;
}
</style>
- 它对
<input>和<textarea>无效（需用::-webkit-textfield-decoration-container::selection等私有前缀，且支持极差） - 不要试图用
getComputedStyle(el).getPropertyValue('::selection')获取状态——根本不存在这个计算值 - 如果发现点击后没高亮，大概率是父级设置了
user-select: none或元素不可选，先检查继承链
真正需要“点击全选”的场景，CSS 能做的只有辅助体验（比如改光标、配色），核心逻辑逃不开 JavaScript。最容易被忽略的是 focus 状态管理——没 focus 就调不了 select()，也拿不到正确的 selection 范围。
