如何在CSS中通过::selection伪元素自定义全站文字高亮色？-css教程-PHP中文网

通过在全局样式中定义 ::selection 伪元素，可以统一修改用户选中文字时的背景色和文本颜色。只需在 :root 或 body 选择器下设置 background-color 和 color 属性，即可让全站文本在选中时应用该配色方案。

如何在CSS中通过::selection伪元素自定义全站文字高亮色？

如何为不同语义元素设置独立的选中样式？

针对标题、正文或链接等不同语义元素，可以通过组合选择器覆盖全局的 ::selection 样式。例如，为 h1 设置深色背景白色文字，而为 p 标签保留默认的浅色高亮，从而实现视觉上的层级区分。

如何在CSS中通过::selection伪元素自定义全站文字高亮色？

/* 全局默认选中样式 */
: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- 前缀。为确保兼容性，通常同时编写标准属性和带前缀的属性，且两者值保持一致。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

如何在CSS中通过::selection伪元素自定义全站文字高亮色？

/* 兼容旧版 WebKit 浏览器的写法 */
::-moz-selection { /* Firefox */
  background-color: #e0f7fa;
  color: #006064;
}

::selection {
  background-color: #e0f7fa;
  color: #006064;
}

::-webkit-selection { /* 早期 Safari/Chrome */
  background-color: #e0f7fa;
  color: #006064;
}