CSS如何利用::selection实现高亮文本个性化_通过伪元素自定义选区背景-css教程-PHP中文网

::selection不生效主因是优先级不足或被覆盖，仅支持color/background-color等有限属性，不支持!important、内联样式及css变量，且在input/textarea、canvas、svg等元素上天然无效。

css如何利用::selection实现高亮文本个性化_通过伪元素自定义选区背景

根本原因通常是选择器优先级不足，或被更具体的规则覆盖。比如全局写 ::selection，但某个组件里用了 .article p::selection 且背景设为透明，那你的全局样式就失效了。

常见错误现象：::selection 写了但选中文本还是默认蓝底白字；或者只在部分元素上生效。

必须确保没有更高优先级的同名伪元素规则（检查 DevTools 的 Computed 面板）
不能用 ID 选择器或内联样式覆盖它——::selection 不支持 !important，也不响应内联 style
某些 CSS 重置库（如 Normalize.css）会主动清空 ::selection，需手动补回
只支持有限的属性：仅 color、background-color、text-shadow、cursor、outline（部分浏览器），其他如 font-size 或 border 会被忽略

Chrome / Edge 106+ 和 Safari 16.4+ 支持标准语法；Firefox 从 60+ 开始支持，但旧版本需加 ::-moz-selection 前缀——现在基本可不写，除非还要兼容 Firefox 59 及更早。

关键区别在于：Safari 对 text-shadow 的渲染偏弱，而 Firefox 曾长期不支持 background-image（至今仍不支持）。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

不能直接用 @media (prefers-color-scheme: dark) 嵌套 ::selection（语法非法），得把媒体查询放在外层，再重复声明伪元素。

使用场景：网站已用 prefers-color-scheme 切换主题，但选中文本在深色背景下仍是浅色背景，导致对比度爆炸。

写法必须是：

@media (prefers-color-scheme: dark) {
  ::selection {
    background-color: #4a5568;
    color: white;
  }
}

不是所有可选中文本的容器都响应 ::selection。核心限制来自渲染层：只有「文本内容由浏览器原生排版引擎绘制」的元素才支持。

常见错误现象：给 <canvas></canvas> 上模拟的文字加 ::selection 没反应；或者 React 中用 contenteditable + 自定义光标后，选区样式消失。

<input> 和 <textarea></textarea> 完全不支持 ::selection（它们用 ::-webkit-input-placeholder 等独立伪元素）
user-select: none 会直接禁用选中行为，::selection 自然无意义
WebGL / Canvas 渲染的文字、SVG <text></text> 元素、以及用
```
paint()` API 绘制的文本，都不走 CSS 选中流程
```
Shadow DOM 内部需在 shadow root 中单独定义 ::selection，不会继承外部样式