通过在全局样式中定义 ::selection 伪元素，可以统一修改用户选中文字时的背景色和文本颜色。只需在 :root 或 body 选择器下设置 background-color 和 color 属性，即可让全站文本在选中时应用该配色方案。
如何为不同语义元素设置独立的选中样式？
针对标题、正文或链接等不同语义元素，可以通过组合选择器覆盖全局的 ::selection 样式。例如，为 h1 设置深色背景白色文字，而为 p 标签保留默认的浅色高亮，从而实现视觉上的层级区分。
/* 全局默认选中样式 */
:root {
--sel-bg: #e0f7fa;
--sel-fg: #006064;
}
::selection {
background-color: var(--sel-bg);
color: var(--sel-fg);
}
/* 标题独立选中样式 */
h1::selection {
background-color: #333;
color: #fff;
}如何处理浏览器兼容性与回退机制？
现代主流浏览器均原生支持标准的 ::selection 伪元素，但在旧版 WebKit 内核浏览器（如早期 Safari）中可能需要添加 -webkit- 前缀。为确保兼容性，通常同时编写标准属性和带前缀的属性，且两者值保持一致。
立即学习“前端免费学习笔记（深入）”；
/* 兼容旧版 WebKit 浏览器的写法 */
::-moz-selection { /* Firefox */
background-color: #e0f7fa;
color: #006064;
}
::selection {
background-color: #e0f7fa;
color: #006064;
}
::-webkit-selection { /* 早期 Safari/Chrome */
background-color: #e0f7fa;
color: #006064;
}当选中区域包含不可见字符时会发生什么？
如果选中的文本末尾包含换行符或空格等不可见字符，::selection 样式同样会应用于这些字符所在的区域。虽然视觉上不可见，但选区范围仍会延伸，导致背景色覆盖到不可见字符对应的空间位置，这在某些布局紧凑的场景下可能影响视觉对齐。
