::selection

::selection CSS 伪元素 将样式应用于用户突出显示的文档部分(例如,单击并拖动鼠标穿过文本)。

试一试

允许的属性

只有某些 CSS 属性可以与 ::selection 一起使用

特别是,忽略了 background-image

语法

css
::selection {
  /* ... */
}

无障碍访问

不要出于纯粹的美学原因覆盖选中文本样式 — 用户可以根据自己的需要自定义它们。对于遇到认知问题或技术水平较低的人来说,选择样式的意外更改可能会损害他们对功能的理解。

如果覆盖,则必须确保选择的文本和背景颜色之间的对比度比率足够高,以便视力较差的人能够阅读它。

颜色对比度比率是通过比较选中文本和选中文本背景颜色的亮度来找到的。为了满足当前的 Web 内容可访问性指南 (WCAG),文本内容必须具有4.5:1 的对比度比率,或者对于标题等较大的文本,对比度比率为 3:1。(WCAG 将大文本定义为介于 18.66px24px 之间且为粗体,或 24px 或更大。)

示例

HTML

html
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

CSS

css
/* Make selected text gold on a red background */
::selection {
  color: gold;
  background-color: red;
}

/* Make selected text in a paragraph white on a blue background */
p::selection {
  color: white;
  background-color: blue;
}

结果

规范

规范
CSS 伪元素模块级别 4
# selectordef-selection

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅