如何利用HTML实现网页文字的选中颜色自定义_通过::selection伪元素-html教程-PHP中文网

::selection没生效最常见原因是被更具体规则覆盖或父容器设了user-select: none；仅支持color、background-color、text-shadow、cursor四属性；需单独写::-moz-selection兼容firefox；只对可选中文本生效。

如何利用html实现网页文字的选中颜色自定义_通过::selection伪元素

为什么 `::selection` 设置后没生效

最常见原因是选择范围被更具体的 CSS 规则覆盖，或者父容器设置了 user-select: none。另外，::selection 只能设置 color、background-color、text-shadow 和 cursor 这四个属性，其他如 font-weight 或 border 会被忽略。

实操建议：

确保样式写在全局作用域或足够宽泛的选择器下（比如直接写 ::selection，而非 div::selection 前置限定过多）
检查是否有 !important 覆盖了你的规则（尤其来自框架或重置 CSS）
确认目标元素未设置 user-select: none —— 这会直接禁用文本选中，::selection 自然失效
Chrome/Edge 和 Safari 对 ::selection 的支持较完整；Firefox 需要加 ::-moz-selection 兼容写法

如何同时兼容 Chrome 和 Firefox

Firefox 不识别标准的 ::selection，必须显式声明 ::-moz-selection，且两者需分开写（不能合并为逗号分隔的选择器，否则整个规则会被 Firefox 忽略）。

正确写法示例：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

::selection {
  background-color: #ff6b6b;
  color: white;
}
::-moz-selection {
  background-color: #ff6b6b;
  color: white;
}

注意：::-moz-selection 不能带空格（比如写成 :: -moz-selection 就无效），也不能和 ::selection 合并在一行用逗号分隔。

`::selection` 能影响哪些内容

它只作用于**可被用户主动选中的文本内容**，不是所有文字都适用：

普通段落、标题、<span></span> 内的文字：✅ 默认可选，样式生效
禁用选中的元素（user-select: none）：❌ 样式不触发
表单控件内文字（如 <input type="text"> 或 <textarea></textarea>）：✅ 但部分浏览器（如旧版 Safari）可能忽略自定义背景色，仅支持颜色
伪元素生成的内容（::before/::after）：❌ 无法被选中，::selection 对其无效
Canvas 或 SVG 中的文本：❌ 不走 HTML 渲染管线，该伪元素不适用