::selection必须同时声明color和background才有效，不支持border等多数属性，safari需兼容::-webkit-selection，input/textarea无法控制，且不可嵌套伪类或使用css变量计算。
selection伪元素不继承父级color和background
直接在 ::selection 里只写 color 或 background，很可能没效果——因为浏览器默认会重置未声明的属性。比如父元素设了深色文字，但 ::selection 没指定 color，选中后文字可能变成不可见的黑色。
- 必须显式声明
color和background，二者缺一不可 -
::selection不支持border、padding、font-size等绝大多数属性 - 不继承
opacity，也不能用rgba()混合出“半透选中”效果（部分浏览器会忽略 alpha）
Chrome/Firefox/Safari对::selection的支持差异
不是所有浏览器都支持同一套写法。Safari 直到 v16.4 才支持多选择器（如 p::selection, li::selection），而旧版 Chrome 要求加 ::-webkit-selection 前缀才能生效。
- 必须同时写两套：
::selection和::-webkit-selection（后者覆盖前者） - Firefox 不支持
::-moz-selection（已废弃），只认标准::selection - Safari 对
background使用渐变或hsl()有时渲染异常，优先用十六进制色值
全局设置 vs 局部覆盖：避免样式污染
很多人在 :root 或 body 下统一写 ::selection，结果发现代码块、输入框里的选中色也被强行改了，体验反而变差。
- 默认只设全局基础色：
body::selection { background: #4a90e2; color: white; } - 需要特殊处理的区域单独覆盖，比如
pre::selection用高对比色，input::selection保持系统原生感 - 注意：
textarea和input[type="text"]的选中色无法用::selection控制，它们走操作系统主题
伪元素嵌套失效：不要在::selection里调用其他伪类
::selection 是顶层伪元素，不能和 :hover、:focus 或另一个 ::before 组合使用。写成 a:hover::selection 或 p::selection::before 都会被浏览器直接忽略。
- 想实现“悬停时选中色变深”，只能靠 JS 监听
mouseenter动态切 class，再用.hovering::selection -
::selection内部不能用 CSS 变量计算动态值（如background: color-mix(in srgb, var(--primary), #000 20%)），多数浏览器不解析 - 动画（
transition/@keyframes）对::selection完全无效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
