::selection真正可用的样式属性仅有color、background-color，部分浏览器支持text-shadow和cursor；font-size、border、padding等一律无效，且不响应!important。
::selection 能生效，但限制极多——它只作用于用户手动选中的文本，且仅支持有限的 CSS 属性，跨浏览器行为也不一致。
哪些样式属性在 ::selection 中真正可用？
只有 color、background-color、text-shadow（部分浏览器）、cursor（极少数）被广泛支持。其他如 font-size、border、padding 一律忽略。
-
color和background-color是最稳定、必用的两个属性 -
text-shadow在 Chrome/Firefox 中有效，但在 Safari 16.4+ 才开始支持，旧版 Safari 会直接丢弃整条规则 - 不要写
opacity或transform——它们不会报错，但完全无效
为什么有时候 ::selection 完全不生效？
常见原因不是语法错，而是层级或继承干扰：
- 父元素设置了
user-select: none，子元素哪怕写了::selection也选不了，自然不触发 - 选中区域包含
<input>或<textarea></textarea>—— 这些表单控件有自己的原生选中样式，::selection对它们无效（需用::-webkit-input-placeholder::selection等专有伪元素，且兼容性差） - CSS 优先级被更高权重的选择器覆盖，比如
div p::selection被p::selection后声明的规则压过 - 用了
!important？别加——它在::selection中多数浏览器直接无视
如何让深色模式下选中文本依然可读？
不能只靠 @media (prefers-color-scheme: dark) 套一层，因为 ::selection 的颜色必须与当前背景形成足够对比度，否则文字会“消失”。
- 深色背景配浅色文字时，选中背景建议用
#4a5568类似灰蓝，避免纯黑或纯白 - 浅色背景配深色文字时，选中背景用
#90cdf4这类柔和蓝，比#007bff更不易刺眼 - 如果页面动态切换主题（JS 控制 class），记得同步更新
::selection规则，例如：.dark-theme p::selection { background-color: #2d3748; color: #e2e8f0; }
真正麻烦的是：Safari 对 ::selection 的继承逻辑和 Chrome 不同，同一段 CSS 在 Safari 可能只对 <p></p> 生效，对 <span></span> 内嵌文本却失效——这时候得显式给内联元素单独写规则，而不是依赖父级继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
