怎么在CSS中通过::selection伪元素自定义文字选中高亮-css教程-PHP中文网

::selection无效最常见原因是未顶层声明且未双写前缀：必须独立写在css顶层，先::-webkit-selection再::selection，不可嵌套；父元素user-select:none、css-in-js作用域限制、ui框架重置及移动端兼容性问题亦会导致失效。

怎么在css中通过::selection伪元素自定义文字选中高亮

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

最常见原因不是语法错，而是规则压根没被浏览器解析到：::selection不能嵌套在任何类、ID 或媒体查询里——比如.article p::selection或@media (min-width: 768px) { ::selection { } }在 Safari 和旧版 Chrome 中会被直接跳过。
父容器设了user-select: none，子元素根本无法触发选中行为；CSS-in-JS 库（如 Emotion）默认注入局部作用域，::selection得用 injectGlobal 或手动插入 <style></style> 到；某些 UI 框架（如 Ant Design）重置了全局 ::selection，颜色设为 transparent 或继承，需显式覆盖。

`::selection`必须双写前缀且顶层声明

仅写 ::selection 在 iOS Safari 15.4 之前、Android WebView 等环境会失效。正确顺序是先 ::-webkit-selection，再 ::selection：

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

::-moz-selection 已废弃，Firefox 91+ 只认标准 ::selection，加了反而冗余；::selection 必须是顶层 CSS 规则，不能包裹在任何其他选择器或条件块内；别把 ::selection 放在 ::-webkit-selection 前面，否则部分 Safari 会忽略后者。

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

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

下载

不同区块用不同高亮色，得靠具体宿主元素选择器

::selection 不继承，也不作用于“容器”，而是作用于被选中文本所在的**实际宿主元素**（比如 p、span、h1）。所以写成 .sidebar::selection 没效果，是因为文本实际在 .sidebar p 里。

要给文章段落设黄色高亮：.article p::selection { background: #ffcc00; color: #333; }
要覆盖引文区域：.quote blockquote::selection, .quote cite::selection { color: #666; }
跨区块拖选时，颜色由**选区起点所在元素的最近有效规则**决定，不会渐变或拼接

只支持有限属性，别乱试

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

✅ 安全可用：color、background-color（支持 rgba()，但 transparent 会退回到系统默认色）、text-shadow（Chrome/Safari 支持较好，Firefox 目前不支持）
❌ 明确不支持：font-size、padding、border、opacity、transform、CSS 变量计算（如 calc(--accent * 0.8)）
别写 color: inherit 或 color: currentcolor——它不继承，必须写具体值
移动端 Safari 对 text-shadow 和 color 支持极弱，background-color 是唯一稳定可控的属性