::selection 仅控制已选中文本样式，无法限制选中范围；真正控制选中行为需用 user-select 属性，通过全局禁用再局部启用实现。
为什么 ::selection 无法真正“限制”选中范围
::selection 是伪元素，只控制**已选中文本的样式**，不是选中行为的开关。浏览器不提供 CSS 接口来禁止或限定用户鼠标拖拽选中的区域——它对整个可交互文档生效，你只能决定“被选中后看起来什么样”。试图用 ::selection 实现“仅允许选中某段文字”属于方向错误。
替代方案：禁用选中 + 手动启用关键区域
真正能控制选中行为的是 user-select 属性。默认值是 auto（由浏览器决定），常见取值有：none、text、all、contain。要实现“只让某块内容可选”，得先全局禁用，再局部放开：
- 给
或根容器加user-select: none - 给目标区域（如
<div class="copy-target">）显式设为 <code>user-select: text - 注意：表单控件（
<input>、<textarea></textarea>）默认可选，需单独处理
user-select: text 在不同浏览器下的兼容性细节
Chrome、Firefox、Safari（16.4+）、Edge 都支持标准写法，但旧版 Safari 需要 -webkit-user-select 前缀。实际部署建议这样写：
.copy-target {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
别漏掉 -ms- 前缀——IE10/11 和早期 Edge 仍可能遇到；-moz- 对 Firefox 低版本更稳妥。纯现代项目可只留标准属性，但生产环境建议保留前缀。
容易忽略的交互副作用
设了 user-select: none 后，按钮点击、链接跳转本身不受影响，但以下情况会出问题：
- 含文本的
<button></button>或<label></label>可能被误判为不可交互，建议加user-select: text显式恢复 - 使用
contenteditable的区域必须设为user-select: text，否则光标无法定位 - 移动端 Safari 对
user-select: none的响应有时延迟，可配合touch-callout: none防止长按弹出菜单
真正难处理的是混合内容场景：比如一段文字里只有几个词需要可复制，又不想包裹太多标签——这时就得靠 JS 监听 selectstart 事件手动取消，CSS 已无能为力。
