::selection必须同时设置color和background-color才稳定生效，否则易出现黑底黑字或白底白字；失效主因是user-select:none、作用域限制（如scoped/shadow dom）或选择器权重不足。
::selection 必须同时设置 color 和 background-color 才能稳定生效，只写一个常导致黑底黑字或白底白字，根本看不出变化。
为什么写了 ::selection 却完全没反应
不是语法错，而是浏览器压根没触发这个伪元素。常见原因有三个：
- 父容器或自身设置了
user-select: none——文本不能被选中，::selection就没机会运行 - 写在
<style scoped></style>（如 Vue）或 Shadow DOM 里——它不穿透作用域，直接被忽略 - 页面某处写了更具体的选择器，比如
p::selection，而你的全局::selection权重不够，被覆盖了
排查方法：选中一段文字，在 DevTools 的 Styles 面板里搜 ::selection，看有没有规则显示出来；再往上逐级检查 computed styles 中的 user-select 值。
::selection 支持哪些属性、哪些绝对不能用
它只接受极少数属性，多了就静默失效，不会报错也不会提示：
- ✅ 必须显式设置的两个：
color（文字色）、background-color（背景色）——缺一不可 - ⚠️ 有条件支持：
text-shadow（Firefox 支持，Chrome/Safari 大部分版本忽略；Safari 15.4+ 才开始认） - ❌ 完全无效：
font-size、border、padding、background-image、transform、opacity、CSS 变量计算值（如calc(--primary * 0.8)）
别在 ::selection 里试 rgba() 半透明色——部分 Safari 版本会降级为纯色或发灰，优先用十六进制不透明值，比如 #3b82f6 而非 rgba(59, 130, 246, 0.3)。
input 和 textarea 里的文字能用 ::selection 控制吗
基本不能。Chrome/Firefox 对 input::selection 和 textarea::selection 支持极差，Safari 更是几乎无视。这不是你漏写了前缀，是浏览器有意限制：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 原生表单控件的选中态由操作系统级渲染逻辑控制，CSS 层面无法可靠干预
- 即使加了
::-webkit-selection，也只在部分 Chrome 版本下对textarea有微弱响应，input[type="text"]基本无效 - 某些旧版 Safari 甚至会把
color当成背景色渲染，造成颜色错乱
真要统一风格，要么放弃定制、接受系统默认，要么用 contenteditable="true" 替代 input（需自行处理值同步、a11y、焦点管理），代价很高。
跨浏览器兼容写法与顺序陷阱
必须写三份规则，且顺序不能错：
-
::-moz-selection放最前（Firefox 旧版需要） -
::-webkit-selection放中间（Safari/macOS/iOS 必须带前缀） -
::selection放最后（现代标准兜底）
示例：
::-moz-selection { color: white; background-color: #007acc; }
::-webkit-selection { color: white; background-color: #007acc; }
::selection { color: white; background-color: #007acc; }
别指望 @supports 检测 ::selection，它不支持条件查询，只能靠前缀兜底。另外，::selection 不继承、不级联，也不作用于空元素或没有文本内容的容器——给 body 写等于白写。
真正容易被忽略的是：iOS 长按时弹出的系统级选择菜单（“复制”“搜索”等）会绕过所有 CSS，强制使用浅灰背景，此时 ::selection 完全失效。这是系统行为，任何样式都无权干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
