::selection 仅支持 color、background-color、text-shadow 等极少数属性；需注意 user-select 控制、选择器优先级、全局作用域、浏览器前缀及移动端兼容性问题。
直接写 ::selection 就能生效，但浏览器只认有限几个属性，且容易被 user-select: none 或优先级更高的规则悄悄屏蔽。
哪些 CSS 属性真正起作用
::selection 不是普通选择器，它只接受极少数样式声明。写了也白写的属性（比如 font-size、padding、border）会被浏览器直接忽略。
-
color和background-color是最稳定、必用的两个 -
text-shadow可用，但在深色背景上容易看不清，建议搭配color一起调 -
cursor理论上支持，但多数浏览器不渲染；outline和text-decoration行为不稳定，不建议依赖 -
background-color不能设为transparent，否则退回到浏览器默认高亮色；推荐用带 alpha 的rgba()或纯色值
为什么写了没反应？先查这三处
不是代码错了，而是环境卡住了。最常踩的坑都集中在 DOM 控制权和 CSS 作用域上。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 父容器设置了
user-select: none—— 子元素根本无法被选中，::selection自然不会触发 - 页面某处写了更具体的选择器，比如
p::selection，而你全局写的::selection权重不够，被覆盖 - React/Vue 组件中用了
dangerouslySetInnerHTML或v-html，样式被 scoped CSS 或 CSS-in-JS 隔离，得手动把::selection规则提到全局 style 标签里 - 某些 UI 库（如 Ant Design）会在
上加user-select: text的“反向重置”，反而覆盖了你原本的意图——打开 DevTools 检查 computed styles 里的user-select值
兼容性写法必须带前缀，且顺序不能错
Firefox 仍需 ::-moz-selection，而且它必须写在标准 ::selection 之前，否则会被后写的覆盖。Chrome/Safari/Edge 已支持标准写法，但保留 ::-webkit-selection 仍是稳妥做法。
::-moz-selection {
background-color: #ff6b6b;
color: white;
}
::-webkit-selection {
background-color: #ff6b6b;
color: white;
}
::selection {
background-color: #ff6b6b;
color: white;
}
- 所有规则必须写在全局作用域，不能嵌套在
.class或#id里，否则 Safari 和旧版 Chrome 不识别 - 移动端 Safari 对
background-color支持不稳定，尤其在深色背景上可能发灰或半透明——建议用不依赖亮度的纯色，比如#ff6b6b而非hsl(0, 100%, 80%) - 暗色模式下，固定色值可能对比度不足，可配合
@media (prefers-color-scheme: dark)单独调整
想只对某段文字生效？别硬套选择器
.my-paragraph::selection 这种写法**无效**，浏览器不支持带类名的 ::selection。所谓“局部化”，只能靠继承和上下文重置来模拟。
- 给目标区域加 class，比如
<div class="code-block">，再单独设置它的 <code>color和background-color，内部::selection会基于这个上下文渲染，视觉上就像专属效果 - 真要彻底隔离（比如代码块内选中变蓝、正文变橙），只能用 JS 拦截
mousedown+selectstart，手动创建浮动层模拟选中态——代价高，仅限特殊交互场景 - 表单控件（
<input>、<textarea></textarea>）的::selection行为受限，部分浏览器不支持自定义，不要强求
真正难的不是写几行 CSS，而是搞清「谁阻止了选中」「谁覆盖了样式」「谁在移动端悄悄失效」——这些地方一漏，整个自定义就静默失败。
