::selection必须同时声明::-webkit-selection和::selection才在Chrome/Safari/Edge生效；失效主因是user-select:none、作用域隔离、选择器权重冲突或input/textarea不支持，仅color和background-color稳定可用。
::selection 必须同时写 ::-webkit-selection 和 ::selection 才能在 Chrome/Safari/Edge 生效；只写一个基本没用。
为什么写了 ::selection 却完全不生效
不是语法错，而是伪元素根本没触发。最常踩的坑是：
- 父元素（哪怕只是
body）设置了user-select: none，文本压根不能被选中 - CSS 写在
<style scoped>或 Shadow DOM 里，::selection规则被作用域隔离失效 - 页面某处写了更具体的选择器，比如
p::selection，权重更高，把你全局的::selection覆盖了 - 目标文本在
<input>或<textarea>里——这些原生表单控件无视::selection，改不了
排查方法：选中一段文字，在 DevTools 的 Styles 面板里搜 ::selection，看有没有规则显示出来；再往上逐级检查 computed styles 中的 user-select 值。
::selection 只认 color 和 background-color，其他属性基本白搭
它不是普通选择器，设了 font-size、border、padding、transform 全部被静默丢弃，不报错也不提示。真正稳定可用的只有：
立即学习“前端免费学习笔记（深入）”；
-
color：必须设，否则文字可能和背景同色，看不见 -
background-color：必须设，只设 color 不会变底色 -
text-shadow：Firefox 和 Chrome 支持，Safari 15.4+ 才开始认，别当主力用 -
cursor和outline：理论上允许，但极少用，兼容性差
别用 rgba() 或 hsl() 带 alpha 的颜色值——旧版 Safari 渲染异常，优先用十六进制不透明值，比如 #3b82f6。
跨区块选中时颜色怎么控制
::selection 不继承、不级联，它只作用于被选中文本所在的**宿主元素**。所以：
- 想让文章段落高亮为黄色，得写
.article p::selection { background: #ffcc00; }，而不是.article::selection - 如果用户从
.header拖选到.main，颜色由起点所在元素的最近有效规则决定，不会分段变色 - 深色模式下不能只靠
@media (prefers-color-scheme: dark)包一层，得单独重写整套规则，比如：.dark-theme p::selection { background-color: #2d3748; color: #e2e8f0; } - iOS Safari 对嵌套内联元素的支持很弱，有时
p::selection生效，但里面<span>的文字却不响应——得显式给span::selection单独写
移动端和表单控件是硬伤，得提前接受限制
iOS 长按时弹出的系统级选择菜单，固定为浅灰色背景，::selection 完全无效；<input> 和 <textarea> 也基本不响应自定义样式。这不是 bug，是浏览器有意限制——出于安全与 UX 一致性考虑。想统一视觉，只能用 div[contenteditable] 替代，但需自行处理焦点、粘贴、a11y 等逻辑。
真正麻烦的是：同一段 CSS 在 Safari 可能只对 <p></p> 生效，对内嵌文本却失效；而 Chrome 里看起来正常。这种不一致不会报错，只能靠真机测试反复调。
