::selection伪元素不继承父级color，必须显式声明color和background-color，且需双写-webkit前缀与标准语法；深色模式需手动适配，disabled输入框和shadow dom内无效。
selection伪元素不继承父级color，必须单独设
很多人以为给body或容器设了color，里面选中的文字颜色就自动跟着变——其实完全不会。::selection是独立样式层，所有颜色属性都得显式声明，连background-color和color缺一不可，否则浏览器用默认高亮色（通常是蓝底白字）。
常见错误现象：::selection { color: #fff; }写了但没生效，因为没配background-color，或者用了inherit/currentcolor——这两个在::selection里基本无效。
-
::selection只支持有限的CSS属性：仅color、background-color、cursor、outline、text-shadow（部分浏览器支持） - 不能写
font-size、padding、border等布局类属性 - Chrome/Edge从99版起支持
::selection作用于<input>和<textarea></textarea>，但Firefox至今不支持表单控件内的自定义选中色
跨浏览器兼容写法要加-webkit前缀
虽然现代浏览器基本都支持无前缀::selection，但Safari 15.4之前、旧版Chrome仍依赖::-webkit-selection。不加前缀会导致iOS Safari或老Android WebView里完全失效。
正确写法是双写，且顺序不能错：先写带前缀的，再写标准版，避免被覆盖。
/* 必须这样写 */
::-webkit-selection {
color: #fff;
background-color: #007acc;
}
::selection {
color: #fff;
background-color: #007acc;
}
深色模式下选中文本容易看不清
如果页面支持深色模式，只用固定色值（比如background-color: #007acc）会导致暗背景下选中区域对比度不足，甚至文字完全看不见。别指望系统自动适配——::selection不响应@media (prefers-color-scheme: dark)，得手动切。
- 用CSS自定义属性配合JS切换：定义
--selection-bg和--selection-text，在document.documentElement上动态设style - 纯CSS方案可用
@media嵌套（需确认目标浏览器支持）：@media (prefers-color-scheme: dark) { ::-webkit-selection { background-color: #4a5568; color: #e2e8f0; } ::selection { background-color: #4a5568; color: #e2e8f0; } } - 注意：Firefox对
@media内::selection的支持不稳定，稳妥起见仍建议JS控制
伪元素无法作用于disabled的input或shadow DOM内容
这是最容易忽略的限制：::selection对input[disabled]、textarea[readonly]（部分浏览器）、以及Shadow DOM内部文本完全无效。用户照样能拖选，但你写的样式不会应用。
比如自定义组件用了attachShadow，里面一段<p>可选文字</p>，即使加了::selection规则，也不会生效——Shadow DOM有自己独立的样式作用域，外部规则进不去。
- 解决
disabled输入框的选中色？不行，浏览器强制禁用样式接管 - Shadow DOM内需要高亮？必须在组件内部的
shadowRoot里注入对应::selection规则 - 某些富文本编辑器（如ProseMirror）把内容渲染在
contenteditable里，此时::selection有效，但要注意它可能包裹了大量内联元素，样式穿透性更差
实际用的时候，最常翻车的是忘了background-color必须配，或者以为深色模式能自动适配。这两点不盯住，上线后用户一选就懵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
