如何使用CSS::selection自定义文本选中效果-css教程-PHP中文网

::selection 可实现不同颜色文本选中自动反色，需用 css 变量配合，且必须解决 user-select: none、优先级覆盖及 input/textarea 特殊处理等问题；仅支持 color、background-color 等有限属性，不支持 font-size、border 等；移动端兼容性需注意 safari 闪退和 android webview 的 -webkit-user-select。

如何使用css::selection自定义文本选中效果

::selection 能生效，但默认只支持全局统一配色，想让不同颜色的文本（比如日志里的红/绿/灰文字）选中时自动反色？必须用 CSS 变量配合写法，否则会失效或覆盖。

为什么直接写 `::selection` 常常不生效

最常见原因是祖先元素加了 user-select: none，整个区域根本无法被选中；其次是 CSS 优先级问题——比如你写了 p::selection，但页面里某处更具体的规则（如 .log-entry::selection）覆盖了它；还有就是误以为 ::selection 能作用于 <input> 或 <textarea></textarea>，其实默认不响应，得额外加 user-select: text 才行。

检查方法：DevTools 里选中一段文字 → 看 Styles 面板右下角是否显示 ::selection 规则；没出现就先查父级有没有 user-select: none 或 pointer-events: none。

`::selection` 支持哪些属性，哪些绝对不能用

只允许设置：color、background-color、text-shadow、cursor、outline、text-decoration。其他像 font-size、padding、border、transform 全部忽略，写了也白写。

background-color 必须是不透明或半透明值，transparent 会退回到浏览器默认高亮色；text-shadow 在深色背景上容易糊成一片，建议和 color 搭配调，别单独用。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

background 可以用（包括渐变），但 background-image 不支持
caret-color 在部分浏览器里能影响光标色，但不是所有场景都生效
别试图用 ::selection 触发 JS 事件或修改 DOM —— 它纯样式层，无交互能力

如何让不同颜色文本各自反色（比如绿色字选中变黑底白字，红色字选中变白底黑字）

靠 CSS 自定义属性实现，核心是把原始 color 和期望的选中背景色解耦出来：

span {
  --color: #0f0; /* 原始前景色 */
  --bg: #fff;     /* 原始背景色（用于选中时当文字色） */
  color: var(--color);
  background: var(--bg);
}
span::selection {
  background: var(--color);
  color: var(--bg);
}
span::-webkit-selection {
  background: var(--color);
  color: var(--bg);
}

这样每段 <span></span> 只需改 --color 和 --bg，就能独立控制选中效果。注意 Safari 必须加 ::-webkit-selection，Firefox 已统一支持标准写法，::-moz-selection 可省略。

不要把 ::selection 写在媒体查询里，它必须是顶层规则
如果文本嵌套在 <pre class="brush:php;toolbar:false;"></pre> 或 <code> 里，记得给这些容器加 user-select: text
暗色模式下不会自动适配，得靠 @media (prefers-color-scheme: dark) 手动重设变量