::selection中text-shadow无效是因浏览器支持保守，仅color、background-color等少数属性稳定生效，safari等完全忽略text-shadow；需用background-color验证伪元素是否触发，或以box-shadow+background-clip:text模拟。
为什么::selection加text-shadow没反应
因为浏览器对::selection的样式支持非常保守，text-shadow在部分旧版 Chrome 和所有 Safari（截至 Safari 17）中被完全忽略——不是写法错，是引擎不认。真正能稳定生效的只有color、background-color、cursor，以及极少数支持text-shadow的现代 Chromium（如 Chrome 120+）。
实操建议：
- 先用
background-color: #ffeb3b+color: #212121验证伪元素是否生效，排除选择器或层叠问题 - 若必须加阴影，改用
box-shadow配合background-clip: text模拟（但会失去原生选区行为） - 避免在
::selection里写font-size、transform等无效属性，它们会被静默丢弃
::selection在不同元素里的继承表现
::selection不继承父元素样式，它只作用于被选中的文本节点本身，且会受user-select控制。比如div设了user-select: none，里面文字根本无法被选中，::selection自然无从触发。
常见错误现象：
- 按钮内文字选不了 → 检查是否父级
button或input默认禁用文本选择 - 富文本编辑器（如
contenteditable）中样式失效 → 需单独给编辑区域加::selection，且要带!important覆盖编辑器内联样式 - SVG 中的
<text></text>不响应 → SVG 的文本选中机制与 HTML 不同，::selection对其无效
兼容性兜底：当::selection不可靠时怎么办
移动端 WebView、微信内置浏览器、老旧 Android 系统对::selection的支持更碎片化，甚至存在“仅支持background-color，其他全忽略”的情况。
可考虑的替代路径：
- 用 JavaScript 监听
selectionchange事件，动态插入一个带box-shadow的span包裹当前选区（需处理跨节点、DOM 变更等边界） - 对关键文案（如代码块、引用段落）提前包裹
<mark></mark>并配mark::after伪元素模拟立体感，虽非真实选区但视觉接近 - 放弃阴影，专注提升
background-color对比度（如深色背景配亮黄底），这是最稳的“立体感”来源
Chrome DevTools 里调试::selection的隐藏限制
DevTools 的样式面板默认不显示::selection规则，即使写了也看不到是否匹配——它不会出现在“Computed”标签页里，也不会高亮在“Styles”中，除非你手动在元素上右键 → “Force element state” → 勾选:active或:focus都无效，必须真选中文本才能临时看到。
调试技巧：
- 在控制台执行
getSelection().toString()确认当前有选区 - 把
::selection规则写在 CSS 文件末尾，并加!important，防止被其他规则覆盖 - 不要依赖
prefers-color-scheme媒体查询嵌套::selection——多数浏览器不支持这种嵌套写法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
