chrome中::selection不生效常因user-select: none禁用选中；firefox仅支持color/background-color，safari额外支持text-shadow但background-image常失效；::selection不继承、不级联，需单独为input/textarea/pre code等定义；深色模式下需用@media手动适配，已选中内容不会实时更新。
Chrome里::selection不生效？检查是否被user-select: none拦截
很多情况下写好了::selection样式却没反应，不是语法错，而是父元素或自身设置了user-select: none——这个声明会直接禁用整个区域的文本选中行为，伪元素自然无从触发。
实操建议：
- 用浏览器开发者工具检查目标文字的计算样式，重点看
user-select值是否为none - 若需保留部分可选中、部分不可选中，避免在容器上设
user-select: none，改用pointer-events: none或opacity: 0.5等视觉替代方案 -
::selection本身不支持user-select属性，它只响应“已被允许选中”的文本
Firefox和Safari对::selection的支持差异在哪
Firefox只支持color和background-color两个属性；Safari（macOS/iOS）额外支持text-shadow和background-image（但background-image实际渲染常被忽略）；Chrome和Edge支持最全，包括border、outline等，但border在选中时往往不可见——因为选区是浮动层，不占文档流。
常见错误现象：在Safari里给::selection加了border: 1px solid red，结果完全没效果。
实操建议：
- 跨浏览器兼容写法只用
color和background-color，这是所有主流引擎都稳定支持的 - 若必须加阴影，先写
color和background-color保底，再单独为WebKit加text-shadow - 不要依赖
font-size、padding等布局类属性——它们在::selection中被忽略
::selection作用域容易误用的三个地方
这个伪元素不继承，也不级联，它的匹配逻辑很“直白”：只作用于当前元素内被用户实际拖选中的文字节点，且不会穿透到子元素的伪元素或content生成内容中。
使用场景举例：给文章正文设置高亮色，但不想影响代码块里的选中效果。
实操建议：
- 如果想让
<pre class="brush:php;toolbar:false;"><code></code>里的文字用不同选中色，得单独写<code>pre code::selection</code>，不能靠父级覆盖</pre> -
input和textarea内部的选中文本**不响应**全局::selection，必须用input::selection和textarea::selection单独定义 - 用
content: "xxx"生成的文字（比如blockquote::before）无法被选中，因此::selection对其无效
深色模式下::selection颜色要动态适配吗
不需要自动适配。CSS媒体查询如@media (prefers-color-scheme: dark)可以套在::selection外面，但要注意：选中状态本身不触发媒体查询重算——也就是说，用户切深色模式后，已存在的选中高亮不会实时变色，只有新选中的文字才按新规则渲染。
性能影响很小，但兼容性需留意：旧版Safari（@media内嵌套伪元素。
实操建议：
- 推荐写法是分开声明：
::selection+@media (prefers-color-scheme: dark) { ::selection }，别嵌套 - 深色背景上慎用纯黑文字+深灰背景的组合，对比度可能低于4.5:1，影响可访问性
- 如果项目用了CSS变量控制主题色，
::selection里可以直接引用var(--selection-bg)，但注意IE完全不支持
真正麻烦的是那些被user-select: contain或contain: content限制的容器，它们会让::selection行为变得难以预测——这种时候不如退一步，用JS监听selectstart事件手动加class模拟高亮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
