code标签内选中文本颜色不生效，主因是父容器（如pre）设了user-select:none导致无法选中，或语法高亮库中具体token选择器覆盖了全局code::selection规则，且需注意Safari必须用::-webkit-selection前置声明。
code 标签里选中文本颜色为啥不生效
不是 code 标签本身特殊，而是它常被套在禁用选中的容器里。比如文档中常见 <pre><code>... 结构，而某些重置 CSS（如 Normalize.css 或框架默认样式）会给 pre 加 user-select: none；一旦父级设了这个，code 里的文字根本无法被选中，::selection 自然没机会触发。
检查 DevTools 的 Elements 面板，点开 code 元素，看 Computed 里 user-select 是否为 none —— 如果是，往上逐级查，直到定位到设置该样式的源头。
- 别只盯着
code::selection写没写对，先确认它“有没有被允许选中” - 避免在
<code>外层包裹div并设user-select: none，除非你真不需要用户复制代码 - 若用 Markdown 渲染器（如 remark / vitepress），注意其生成的
pre默认可能带tabindex="-1"或role="region"，这些不影响选中，但有些定制样式会连带加user-select
::selection 必须同时声明 -webkit- 前缀和标准写法
code::selection 在 Safari（包括 iOS）和旧版 Chrome 中完全不认标准 ::selection，必须显式加上 ::-webkit-selection，且顺序不能错：前缀版必须写在前面，否则 Safari 直接忽略整条规则。
下面这段是唯一可靠写法：
立即学习“前端免费学习笔记（深入）”；
::-webkit-selection {
background-color: #3b82f6;
color: white;
}
::selection {
background-color: #3b82f6;
color: white;
}- 不要合并成
::selection, ::-webkit-selection—— Safari 会整个丢弃 -
::-moz-selection已废弃，Firefox 91+ 只认标准::selection，加了反而冗余 - 所有规则必须写在全局作用域（即不嵌套在
.class或#id下），否则 Safari 不识别
code 标签内文字选中颜色必须手动覆盖默认高亮
很多语法高亮库（如 Prism.js、highlight.js）会给 code 内的 token 打上类名（如 .token.keyword），并单独设置了 color 和 background-color。这时候即使你写了 code::selection，实际选中的是某个 <span class="token">，而它的父级或自身可能定义了更具体的选择器（如 span.token::selection），直接覆盖你的全局规则。
- 打开 DevTools，在 Elements 面板里右键选中的文字 → “Reveal in Elements panel”，看真实 DOM 节点结构
- 如果高亮库注入了内联 style 或 scoped CSS，
code::selection会被隔离失效 - 稳妥做法是提高选择器权重，比如写
code *::selection或pre code *::selection，但注意这会影响所有子元素，包括注释、字符串等
input 和 textarea 里包裹的 code 文本无法用 ::selection 控制
如果你把 code 放进 <input type="text"> 或 <textarea>，那它就完全脱离了 HTML 渲染管线——这些控件走操作系统原生文本渲染，::selection 对它们无效，这是规范限制，不是 bug。
想实现类似效果，只能换方案：
- 改用
div[contenteditable]模拟输入框，再把code塞进去，但需自行处理焦点、粘贴、光标位置等逻辑 - 放弃控制，接受系统默认选中色（iOS 固定浅灰背景，Android 各厂商不一）
- 若只是展示用途，确保
code在普通p或pre里，而非表单控件内部
真正卡住人的从来不是怎么写 ::selection，而是它在哪能生效、被谁拦住了、以及你以为选中的是 code，其实选中的是它里面一堆 span。动手前先打开 DevTools 看一眼真实节点和 computed 样式，比反复改 CSS 有效得多。
