在CSS3中怎样通过::selection伪元素自定义文本选中文档-css教程-PHP中文网

::selection 要生效需同时写 ::-webkit-selection 和 ::selection 且内容一致，仅支持 color 和 background-color，受 user-select、作用域、浏览器兼容性等多重限制。

在css3中怎样通过::selection伪元素自定义文本选中文档

::selection 要真正生效，不是写对语法就行，而是得绕过浏览器一堆默认拦截和作用域陷阱。它大概率“不生效”，不是你漏了分号，而是被 user-select: none、<style scoped></style>、或 iOS 系统级菜单直接废掉了。

不是 CSS 写错了，是选中行为根本没触发：

user-select: none 写在父容器（哪怕只是 body）或自身上——文本压根不能被选，伪元素自然不运行
用 Vue 的 <style scoped></style> 或 Shadow DOM 包裹——::selection 不穿透作用域，样式被丢弃
页面里有更具体的选择器，比如 p::selection 或 .article::selection，权重高于全局 ::selection，把你写的规则覆盖了
用了 CSS-in-JS 库（如 styled-components）动态注入样式——前缀被删、作用域隔离、或规则没挂到，导致无效

排查方法：选中一段文字 → 打开 DevTools → 在 Styles 面板搜索 ::selection，看有没有匹配规则；再往上点 computed styles，检查 user-select 是否为 none。

只写 ::selection 在 Chrome、Edge（Chromium）、新版 Safari 里大概率失效。WebKit/Blink 内核浏览器强制要求显式声明 ::-webkit-selection，且两个规则的声明必须完全相同：

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

下载

正确写法示例：

::-webkit-selection { color: white; background-color: #3b82f6; }
::selection { color: white; background-color: #3b82f6; }

它不是普通选择器，规范只允许修改极少数属性：

必须同时设置的两个：color（文字色）、background-color（背景色）——缺一不可。只设 background-color 时，文字可能继承默认黑色，在深色背景上直接“消失”
有条件支持：text-shadow（Firefox 和 Chrome 支持；Safari 15.4+ 才开始认），cursor（仅悬停时生效，极少用）
明确不支持：font-size、padding、border、opacity、transform、background（注意不是 background-color）
避免用 hsl() 或带 alpha 的 rgba()——Safari 渲染不稳定，深色背景上可能变灰或透明；优先用十六进制值

这些限制在开发时几乎不会报错，但上线后才暴露：

iOS Safari 15.4 之前、Android WebView 等环境会忽略纯 ::selection，必须双写前缀
某些 UI 框架（如 Ant Design）重置了全局 ::selection，颜色设为 transparent 或继承值，需显式覆盖
@media 查询内部写 ::selection 会被 Safari 忽略，必须作为顶层规则书写
<input> 和 <textarea></textarea> 默认不响应 ::selection，得额外加 user-select: text 激活