如何通过CSS伪元素::selection属性和兼容前缀调整,让文本背景颜色不显示?

2026-04-27 17:251阅读0评论SEO基础
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计709个文字,预计阅读时间需要3分钟。

如何通过CSS伪元素::selection属性和兼容前缀调整,让文本背景颜色不显示?

最常见原因是A+style=color:

::selection 支持哪些属性和值

仅允许使用以下 4 个属性,且必须是内联可继承的「文本渲染类」值:

  • color:文字颜色(支持所有合法颜色值)
  • background-color:背景色(注意:transparent 在 Safari ≤ 15.6 中可能失效,建议用 rgba(0,0,0,0) 或明确色值替代
  • text-shadow:仅在 Firefox 中完全支持;Chrome/Safari 不支持该属性用于 ::selection
  • cursor:极少数场景可用,但行为不稳定,不推荐依赖

其他如 font-sizeline-heightbackground-image 均会被忽略。

必须加 -webkit- 前缀才能生效

Chrome、Safari、Edge(基于 Chromium)目前仍要求显式声明带前缀的版本,否则 ::selection 规则会被直接丢弃。

阅读全文

本文共计709个文字,预计阅读时间需要3分钟。

如何通过CSS伪元素::selection属性和兼容前缀调整,让文本背景颜色不显示?

最常见原因是A+style=color:

::selection 支持哪些属性和值

仅允许使用以下 4 个属性,且必须是内联可继承的「文本渲染类」值:

  • color:文字颜色(支持所有合法颜色值)
  • background-color:背景色(注意:transparent 在 Safari ≤ 15.6 中可能失效,建议用 rgba(0,0,0,0) 或明确色值替代
  • text-shadow:仅在 Firefox 中完全支持;Chrome/Safari 不支持该属性用于 ::selection
  • cursor:极少数场景可用,但行为不稳定,不推荐依赖

其他如 font-sizeline-heightbackground-image 均会被忽略。

必须加 -webkit- 前缀才能生效

Chrome、Safari、Edge(基于 Chromium)目前仍要求显式声明带前缀的版本,否则 ::selection 规则会被直接丢弃。

阅读全文