::selection不能设background-image，因规范明确禁止，仅支持color、background-color、text-shadow（firefox专属）、cursor四属性，其余如渐变、变量计算等均被静默丢弃。
为什么 ::selection 不能设 background-image
因为浏览器规范明确禁止 —— ::selection 只接受极少数文本渲染类属性，background-image 不在支持列表里，写了也静默丢弃，不报错、不警告、不 fallback。
::selection 支持哪些颜色相关属性
真正能生效的只有这四个，且必须成对出现才“看得见”：
-
color：文字色（必须显式设置，不能只靠继承） -
background-color：背景色（仅纯色值可靠，rgba()在 Safari 旧版可能降级，transparent在 Safari ≤15.6 会失效） -
text-shadow：仅 Firefox 完全支持；Chrome/Safari 基本忽略（Safari 15.4+ 才开始部分认） -
cursor：行为不稳定，不建议依赖
所有带渐变、滤镜、透明度叠加、CSS 变量计算（如 calc(--primary * 0.8)）的写法，都会被直接跳过。
常见误操作与排查路径
你以为写了 background-image: linear-gradient(...) 是“高级定制”，其实浏览器连解析都懒得做。真正卡住效果的往往是这些：
- 父级设置了
user-select: none—— 文本根本选不了，伪元素压根不触发 - 用了
p::selection, p::-moz-selection合并写法 —— Chrome 见到不认识的::-moz-selection就整条规则丢弃 - 在
<input>或<textarea></textarea>里试 —— 它们走操作系统级渲染，CSS 无权干预 - 在 Shadow DOM 或 Vue 的
<style scoped></style>里写 ——::selection不穿透作用域，得在对应 scope 内重声明
真要模拟“图片感”背景怎么办
别硬刚规范。可退一步用纯色逼近设计意图：
- 把渐变主色提取为十六进制单色（比如从
linear-gradient(45deg, #ff6b6b, #4ecdc4)提取中间值#a99799） - 在深色模式下换一组对比更强的纯色：
@media (prefers-color-scheme: dark) { ::selection { background-color: #2d3748; } } - 若必须动态响应，用 JS 监听
selectionchange，给选区外容器加 class 控制周边装饰，而非强求伪元素本身
最常被忽略的一点：移动端双击选中时，iOS 系统会先用浅灰底闪一下，再切你的样式——这不是你代码慢，是 WebKit 的临时策略，transition 在 Safari 里还不支持作用于 ::selection。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
