tailwind 不支持 ::selection 工具类，因其是伪元素，无法映射为原子类；必须手写三兼容声明：::-moz-selection、::-webkit-selection、::selection，并注意对比度、暗色模式适配及移动端限制。
直接用 ::selection 伪元素改颜色就行，但 Tailwind 默认不提供任何相关工具类，必须手写 CSS；它不支持动画、边框或字体变更，只认 color、background-color 和 text-shadow 这三个属性。
为什么 tailwind.config.js 里加不了 selection 配置
Tailwind 的配置系统只处理“可生成原子类”的样式维度（比如颜色、间距、阴影），而 ::selection 是伪元素，无法映射成 selection:bg-blue-500 这类工具类——它本质是独立 CSS 规则，必须写在样式表里。
- 你往
theme.extend或plugins里塞selection都不会生效 -
@layer components或@layer utilities也不能让它变成可复用的 class，因为伪元素不能被 class 直接调用 - 想全局统一控制，只能老老实实写
::selection { ... }
怎么写才真正生效（含兼容性兜底）
现代浏览器基本支持标准语法，但 Safari 15.4 之前完全无视 ::selection，Firefox 旧版只认 ::-moz-selection，Chrome/Safari 旧版依赖 ::-webkit-selection。所以得三者都写，顺序无关紧要，但必须全有：
::-moz-selection {
background-color: #2563eb;
color: white;
}
::-webkit-selection {
background-color: #2563eb;
color: white;
}
::selection {
background-color: #2563eb;
color: white;
}
- 别只写
::selection就以为完事了，Safari 15.3 及更早版本会彻底失效 - 所有声明必须同时包含
background-color和color，光写text-shadow不会触发高亮渲染 - 不要嵌套，
p::selection span或.content::selection strong都无效
局部覆盖时容易踩的坑
想让代码块或引用段落选中效果不一样，得用更具体的选择器前缀，比如 pre::selection 或 .quote::selection，但要注意优先级和作用范围：
-
pre::selection只影响<pre class="brush:php;toolbar:false;"></pre>元素内**直接被选中的文本**，它的子元素（如<code>）里的文字仍走这个规则，不是继承来的 - 如果
pre里嵌了<span class="token"></span>，且你希望 token 有不同高亮，得单独写pre .token::selection—— 但注意：这其实不合法，::selection不支持后代选择器，正确写法只能是pre::selection+.token::selection并列声明 - 移动端（尤其 iOS）大概率忽略你的 CSS，系统级高亮会强制覆盖；长按选词时，
::selection基本不可靠，别用来做关键交互提示
最常被忽略的是对比度校验：深色背景上用浅色文字选中后，如果 color 和 background-color 对比度不够，用户根本看不清；而且暗色模式下，你写的 ::selection 不会自动适配，得配合 @media (prefers-color-scheme: dark) 手动重写一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
