网页文本看似无法选中，实则因CSS中::selection伪元素的样式设置不当（如选中色与背景色相同），导致视觉上“不可见”；只需调整选中状态的颜色即可恢复正常文本选择功能。
网页文本看似无法选中，实则因css中`::selection`伪元素的样式设置不当（如选中色与背景色相同），导致视觉上“不可见”；只需调整选中状态的颜色即可恢复正常文本选择功能。
在实际开发中，文本“无法被选中”往往并非真正禁用了选择功能（如未使用 user-select: none 或 JavaScript 阻止事件），而是用户误以为无法选中——根本原因通常是选中文本后的视觉反馈缺失。典型场景是：CSS 中 ::selection 伪类将文字颜色（color）或背景色（background）设为与常规文本完全一致，致使鼠标拖选后内容“隐形”，造成“复制失效”的错觉。
例如，原始问题中的网站存在如下 CSS 片段：
body {
::selection {
color: black;
background: white;
}
}
该写法存在两个关键问题：
-
语法错误：
::selection是伪元素，不能嵌套在body { ... }内部书写（应为顶层规则）； - 视觉冲突：若页面默认文字为黑色、背景为白色，则选中态与常态完全重叠，肉眼无法识别选区。
✅ 正确修复方式如下：
/* 修正：独立声明，确保选中态有足够对比度 */
::selection {
color: white;
background-color: #007acc; /* 推荐使用醒目但柔和的强调色 */
}
/* 兼容旧版 WebKit（如 Safari）可额外添加 */
::-webkit-selection {
color: white;
background-color: #007acc;
}
⚠️ 注意事项：
- 不要滥用
user-select: none或 JavaScript 禁用右键/selectstart事件——这不仅损害可访问性（影响屏幕阅读器、键盘导航），还违反 WCAG 2.1 基本可用性原则； - 若确需限制特定区域（如代码块防误操作），应精准作用于目标元素（如
.no-select { user-select: none; }），而非全局应用； - 测试时务必在多浏览器（Chrome、Firefox、Safari、Edge）及深色模式下验证
::selection效果，避免因系统主题覆盖导致失效。
总结：文本“不可选”九成是视觉反馈失效所致。优先检查 ::selection 样式是否合理、语法是否正确，并始终以提升用户体验为前提进行设计——可选、可复制，才是现代网页的基本尊重。
