HTML code标签文本选区颜色的定义步骤-html教程-PHP中文网

code标签内选中文本颜色不生效，主因是父容器（如pre）设了user-select:none导致无法选中，或语法高亮库中具体token选择器覆盖了全局code::selection规则，且需注意safari必须用::-webkit-selection前置声明。

html code标签文本选区颜色的定义步骤

code 标签里选中文本颜色为啥不生效

不是 code 标签本身特殊，而是它常被套在禁用选中的容器里。比如文档中常见 <pre class="brush:php;toolbar:false;"><code>...</code></pre> 结构，而某些重置 CSS（如 Normalize.css 或框架默认样式）会给 <code>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 直接忽略整条规则。

下面这段是唯一可靠写法：

Baoyu Markdown To Html

将 Markdown 转换为微信兼容的样式化 HTML，支持代码高亮、数学公式、PlantUML、脚注、提示框、信息图以及可选机器人...

下载

::-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>，而它的父级或自身可能定义了更具体的选择器（如 span.token::selection），直接覆盖你的全局规则。

打开 DevTools，在 Elements 面板里右键选中的文字 → “Reveal in Elements panel”，看真实 DOM 节点结构
如果高亮库注入了内联 style 或 scoped CSS，code::selection 会被隔离失效
稳妥做法是提高选择器权重，比如写 code *::selection 或 pre code *::selection，但注意这会影响所有子元素，包括注释、字符串等