::selection 中 text-shadow: none 不生效，因 text-shadow 不可继承且伪元素需显式覆盖；须配合具体选择器（如 p::selection）、兼顾浏览器前缀、排除 box-shadow/filter 干扰，并确保 color/background 明确设置。
::selection 中 text-shadow: none 不生效？检查选择器优先级和继承链
直接写 ::selection { text-shadow: none; } 大概率无效，因为原始文本的 text-shadow 是在父元素（比如 p 或 div）上声明的，而 ::selection 伪元素本身不自动继承该属性——它只继承可继承的 CSS 属性（text-shadow 不在其中）。浏览器会把选中状态下的文字渲染为独立图层，其样式需显式覆盖。
正确做法是：在应用了 text-shadow 的具体选择器后，紧接写出对应的 ::selection 规则，并确保选择器权重 ≥ 原规则。例如：
p {
text-shadow: 0 0 3px #fff;
}
p::selection {
text-shadow: none;
background: #007acc;
color: white;
}
- 不要只写
::selection { text-shadow: none; }—— 它太泛，且权重常低于具体元素选择器 - 如果用类名控制高亮（如
.highlight），那就必须写.highlight::selection - Chrome 和 Edge 从 v120+ 开始支持
::selection在 Shadow DOM 内生效，但普通页面无需考虑此边界
深色模式或透明背景下 ::selection 阴影清除仍异常？注意 color 和 background 的组合影响
即使 text-shadow: none 生效，选中文本仍可能“发虚”或“难读”，常见于浅色文字 + 深色背景 + 白色阴影的组合。问题不在阴影本身，而在选中时浏览器默认用半透明蓝色遮罩叠加在已有阴影上，导致视觉混叠。
解决方案不是加更多 text-shadow，而是切断干扰源：
立即学习“前端免费学习笔记（深入）”；
- 强制设置
color和background，避免依赖浏览器默认值 - 对深色背景上的浅色文字，选中时用高对比色：
color: #fff; background: #2563eb; - 若原始文字带
rgba()阴影（如text-shadow: 0 0 4px rgba(0,0,0,0.3);），::selection中仅设text-shadow: none就足够——透明度不会被继承
需要兼容 Safari？::selection 必须带前缀且不能嵌套
Safari（macOS/iOS）直到 Safari 16.4 才完全支持无前缀 ::selection，旧版本（尤其 iOS 15.x 及更早）仍需 ::-webkit-selection。而且 Safari 不支持在 @media 或 @supports 内嵌套 ::selection 规则。
安全写法是并列声明：
p::selection,
p::-moz-selection,
p::-webkit-selection {
text-shadow: none;
background: #3b82f6;
color: white;
}
-
::-moz-selection仅 Firefox 需要，且只支持单层（不能写p span::selection） -
::-webkit-selection覆盖 Safari、Chrome、Edge，但不支持多层选择器（如.card p::selection在旧 Safari 中可能失效） - 别用
!important强顶——它在::selection中部分版本会被忽略
为什么有时删掉 text-shadow 后选中文本还是“有光晕”？检查是否误用了 box-shadow 或 filter
真正让选中文本“发亮”的，未必是 text-shadow。常见干扰项：
-
box-shadow应用在文字容器上（如span外层div），选中时容器未重绘，视觉上像文字自带辉光 -
filter: drop-shadow()或filter: blur()作用于父元素，会污染内部所有内容，包括选区 - CSS 变量动态计算阴影（如
--shadow: 0 0 6px var(--highlight-color);），但::selection里未重定义变量
排查方法：打开 DevTools → 选中文本 → 在 Styles 面板里搜索 text-shadow、box-shadow、filter，逐个禁用看变化。最稳妥的清除方式是给选中态加一层明确的 filter: none;：
p::selection {
text-shadow: none;
filter: none;
}
真正容易被忽略的是：::selection 样式只作用于被选中的文本节点本身，不穿透到子元素（比如 p > strong）。如果高亮逻辑分散在多个嵌套标签里，得为每个层级单独写 ::selection 规则，或者统一收口到最外层容器上处理。
