chrome中::selection不生效需同时声明::selection和::-webkit-selection，且避免scoped样式隔离、透明背景色及非支持css属性。
Chrome里::selection不生效？检查是否漏了::-webkit-selection
Chrome、Edge（Chromium内核）和Safari对::selection的支持依赖于私有前缀。只写::selection，在部分版本中会完全失效——尤其是当你用CSS-in-JS或构建工具自动删前缀时。
必须同时声明两个规则：
::selection {
background: #ff6b6b;
color: white;
}
::-webkit-selection {
background: #ff6b6b;
color: white;
}
-
::-moz-selection在Firefox中已废弃，现代版本只认::selection，不用加 - 如果用了PostCSS autoprefixer，确认其配置支持
::selection——默认不处理这个伪元素，需手动加插件或跳过自动清理 - 背景色必须是半透明或不透明色值；
background: transparent会导致选中态“消失”，不是没生效，是真看不见
::selection能改哪些CSS属性？别试动画、阴影和字体族
规范只允许修改极少数属性：color、background-color、cursor、outline、text-shadow（部分浏览器支持），其余一律忽略。试图加transition或font-family只会白写。
-
text-shadow在Chrome和Firefox中可用，但Safari 16.4+才开始稳定支持 -
cursor仅影响鼠标悬停在选中文本上时的光标形态，不影响拖选过程 - 不能嵌套其他选择器，比如
p::selection strong无效；它只能作用于被选中的文本节点本身
Vue/React组件里::selection突然失效？优先查scoped样式隔离
Vue的<style scoped></style>或React中CSS Modules会为选择器添加属性哈希，但::selection是伪元素，无法被正确挂载到带哈希的宿主元素上——结果就是样式丢失。
- 解决方案：把
::selection提出来，放到全局样式文件（如main.css）中，或用<style></style>不加scoped - 若必须局部化，可借助
:deep()（Vue）或:global()（某些CSS-in-JS库），但注意:deep(::selection)在部分Vue版本中仍不生效，稳妥起见还是走全局 - Next.js中使用
app/目录时，CSS会被模块化，::selection需放在app/globals.css才有效
深色模式下选中文本发灰？background-color别依赖系统色值
用background-color: highlight或color: -webkit-text这类系统关键词，看似省事，实则不可控——它们随系统主题变化，且在不同浏览器中渲染差异极大，深色模式下常变成低对比度灰块，根本看不清文字。
- 始终用明确的十六进制或RGB值，例如
background-color: #4a90e2，确保可读性 - 如果要适配深色模式，用
@media (prefers-color-scheme: dark)重写整套::selection规则，而不是指望系统关键词智能切换 - 移动端iOS Safari对
::selection支持较弱，长按选中后颜色可能延迟应用或闪烁，测试务必真机跑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
