怎样使用css的::selection自定义网页文字选中颜色_提升品牌视觉统一性-css教程-PHP中文网

::selection常无效因浏览器兼容性差，需写全::-webkit/-moz-selection前缀，且仅支持color、background-color等极少数属性；ios safari仅认color；须手动适配深色模式并确保对比度≥4.5:1。

怎样使用css的::selection自定义网页文字选中颜色_提升品牌视觉统一性

为什么直接写 `::selection` 常常没效果

不是代码写错了，而是浏览器根本没执行它。常见原因包括：漏掉 ::-webkit-selection 或 ::-moz-selection 前缀；在 Shadow DOM、<input>、<textarea></textarea> 里直接用无效；或者父级用了 user-select: none 把整个选中行为禁掉了。iOS Safari（至少到 16.x）只认 color，background-color 基本被忽略——这个限制不会报错，只能真机测试。

`::selection` 支持哪些样式属性

只接受极有限的几个 CSS 属性，其余一律被浏览器静默丢弃：

color：必须显式设置，不继承父级 color
background-color：必须用 background-color，写成 background 不生效
text-shadow：仅部分浏览器支持（Firefox 完全不认）
cursor 和 outline：理论上支持，但实际表现不稳定，基本不用

像 font-weight、border、transform、opacity 这些，写了也白写。

怎样写出真正生效的跨浏览器写法

不能只靠 ::selection，得把三个前缀版本写全，且规则内容完全一致，否则层叠顺序会出问题：

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

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

下载

body::selection,
p::selection,
h1::selection,
.code-block::selection {
  color: #fff;
  background-color: #007acc;
}

body::-moz-selection,
p::-moz-selection,
h1::-moz-selection,
.code-block::-moz-selection {
  color: #fff;
  background-color: #007acc;
}

body::-webkit-selection,
p::-webkit-selection,
h1::-webkit-selection,
.code-block::-webkit-selection {
  color: #fff;
  background-color: #007acc;
}

注意点：

如果只想局部生效（比如只让 .highlight 区域有品牌色），就别写 body::selection，否则会被覆盖
深色模式下，硬编码 #007acc 可能和背景对比不足，建议搭配 prefers-color-scheme 手动适配
移动端 Safari 对 background-color 支持弱，可考虑降级为半透明黑/白：background-color: rgba(0, 0, 0, 0.3)