直接写::selection即可修改选中文本背景色，但必须同时设置color和background-color，仅支持有限属性（如text-shadow部分支持），不继承、不受!important影响，且对input/textarea无效。
如何用 ::selection 伪元素自定义选中文本背景色
直接改 ::selection 就行，但浏览器默认只支持有限样式属性，且必须搭配 color 或 background-color 使用，其他如 font-size、border 会被忽略。
基本写法：
::selection {
background-color: #ff6b6b;
color: white;
}
注意：它不继承父级样式，也不受 !important 影响（除非在冲突规则中明确覆盖）。
::selection 的浏览器兼容性与前缀写法
Chrome、Edge、Firefox（≥68）、Safari（≥15.4）原生支持标准语法；旧版 Safari 和 Firefox 需要前缀：
- Firefox 59–67：用
::-moz-selection - Safari ≤15.3 / Chrome ≤59：用
::-webkit-selection
实际建议写全：
::selection {
background-color: #4a90e2;
}
::-moz-selection {
background-color: #4a90e2;
}
::-webkit-selection {
background-color: #4a90e2;
}
没加前缀时，旧版浏览器会完全忽略该规则，不会回退到默认蓝底白字——而是沿用系统默认选中色。
为什么给 <input> 或 <textarea></textarea> 设 ::selection 没反应
因为表单控件的文本选中样式由操作系统或浏览器 UI 层控制，::selection 对它们无效（除部分新版 Chrome 在 <textarea></textarea> 中有限支持外）。
替代方案只有两个：
- 用
contenteditable替代<input>，再配::selection - 接受系统默认表现，不强行覆盖
强行套用只会浪费调试时间——这不是 CSS 写错了，是规范限制。
全局设置失效？检查是否被更具体的选择器覆盖
::selection 的优先级和普通选择器一样，比如下面这段代码里，第二条规则会生效：
p::selection { background-color: yellow; }
.article p::selection { background-color: pink; }
常见踩坑点：
- 写了
div::selection却发现子元素没变色——因为::selection只作用于被选中的文本所在元素，不是继承来的 - 在 Shadow DOM 中需在对应 scope 内定义，不能靠外部样式穿透
- CSS-in-JS 工具（如 styled-components）可能未正确解析
::selection，需手动加css`...`或转义处理
真正麻烦的是跨元素选中（比如从 <p></p> 拖到 <h2></h2>），此时浏览器取各元素 ::selection 中最通用的那个，而不是合并应用——这点几乎没人测试，但上线后用户一拖就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
