CSS伪元素::selection如何自定义网页文字选中后的样式？-css教程-PHP中文网

最常见原因是浏览器未解析规则：::selection必须全局独立声明，不可嵌套在.class或#id中；父容器设user-select:none会彻底禁用选择；需同时声明::-webkit-selection和::selection两条独立规则，且仅支持color、background-color等有限属性。

css伪元素::selection如何自定义网页文字选中后的样式？

为什么写了`::selection`却完全没反应

最常见原因不是写错了，而是浏览器压根没解析这条规则。Safari 和旧版 Chrome 会直接跳过嵌套在 .class 或 #id 里的 ::selection，比如 article.content::selection 这种写法无效。它必须是全局独立声明。

父容器设了 user-select: none —— 子元素根本无法被选中，伪元素自然不触发
CSS-in-JS 库（如 Emotion）默认把样式注入局部作用域，::selection 得用 injectGlobal 或手动插入 <style></style> 到
某些 UI 框架（如 Ant Design）重置了全局 ::selection，颜色设为 transparent 或继承值，需显式覆盖
@media 查询内部写 ::selection 也会被 Safari 忽略

`::selection` 的兼容写法必须双写前缀

只写 ::selection 在 iOS Safari 15.4 之前、Android WebView 等环境会失效。正确顺序是先 ::-webkit-selection，再 ::selection，且内容必须完全一致：

::-webkit-selection {
  background-color: #007acc;
  color: white;
}
::selection {
  background-color: #007acc;
  color: white;
}

::-moz-selection 已废弃，Firefox 91+ 只认标准 ::selection，加了反而冗余
不要把 ::selection 放在 ::-webkit-selection 前面，部分 Safari 会忽略后者
PostCSS autoprefixer 默认不处理 ::selection，构建时得确认没把 ::-webkit-selection 删掉

`::selection` 只支持极少数 CSS 属性

它不是普通选择器，浏览器只接受特定视觉属性，其余一律静默忽略：

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

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

下载

✅ 安全可用：color、background-color（支持 rgba()，但 transparent 会退回到系统默认色）、text-shadow（Chrome/Firefox 支持，Safari 15.4+ 才支持）
❌ 明确不支持：font-size、padding、border、opacity、transform、calc(--accent * 0.8)
background 不等于 background-color：写 background: #007acc 有时会失效，必须用全称
避免用 hsl() 或带 alpha 的 rgba() —— Safari 渲染不稳定，深色背景上可能变灰或透明；优先用十六进制值