CSS伪类选区颜色跨浏览器定义_使用::selection与前缀选区适配-css教程-PHP中文网

chrome中::selection颜色不生效需同时声明::selection和::-webkit-selection；仅支持color、background-color等少数属性；应避免全局设置，改用scoped选择器；深色模式下须手动重写@media规则。

css伪类选区颜色跨浏览器定义_使用::selection与前缀选区适配

Chrome里`::selection`颜色不生效？检查是否漏了`::-webkit-selection`

Chrome、Safari 和新版 Edge 默认只认带 -webkit- 前缀的 ::selection，纯标准写法会被忽略。

必须同时声明两种：标准版 ::selection 和 WebKit 版 ::-webkit-selection，否则在 Chrome 中颜色完全不显示
Firefox 只认 ::selection（无前缀），且不支持 -moz- 前缀
两者样式需保持一致，否则不同浏览器选中效果割裂；若只写一个，大概率有浏览器失效

示例写法：

::selection { background: #ff6b6b; color: white; }
::-webkit-selection { background: #ff6b6b; color: white; }

`::selection`能设置哪些CSS属性？别试无效的

可设属性极少，超出范围的声明会被浏览器静默丢弃，不会报错但也不起作用。

CSS婚礼策划服务机构宣传网站模板

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

下载

只允许：color、background-color、cursor、outline、text-decoration、text-emphasis-color、text-shadow
font-size、border、padding、transform 等一律无效，写了也白写
注意：background 简写可能意外触发无效值（比如含 url() 或渐变），优先用 background-color

全局设置`::selection`影响性能？真会影响渲染流水线

看似轻量的伪类，实际会强制浏览器对所有文本节点启用额外选中状态追踪，尤其在长页面或富文本区域明显。

如果只在某段落需要高亮效果，别直接写全局规则，改用 scoped 选择器：.highlight-text::selection
避免在 body 或 * 上定义，这会让整个文档所有文本都参与选中样式计算
SSR 或静态站点中，若内容不含用户可选文本（如纯图标页），干脆不加 ::selection 规则更省事

深色模式下`::selection`颜色发灰？不是bug是继承逻辑

::selection 的 color 和 background-color 不自动适配系统主题，全靠手动控制。

浏览器不会根据 @media (prefers-color-scheme: dark) 自动切换 ::selection 颜色，必须显式重写
常见错误：只在暗色模式里改了文字色，忘了同步调背景色，导致对比度不足、文字看不清

建议写法：

::selection { background: #4a90e2; color: white; }
@media (prefers-color-scheme: dark) {
  ::selection { background: #2c3e50; color: #ecf0f1; }
  ::-webkit-selection { background: #2c3e50; color: #ecf0f1; }
}

跨浏览器生效这事，从来不是写一次就完——WebKit前缀、属性限制、作用域范围、主题适配，四个点少一个，用户就看到默认蓝底白字。最常被跳过的其实是作用域收窄和暗色模式补全，而不是语法本身。