::selection

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

::selection CSS 伪元素 用于将样式应用于用户高亮显示(例如通过点击并拖动鼠标选择文本)的文档部分。

::selection 伪元素遵循所有高亮伪元素共有的特殊继承模型。有关此继承如何工作的更多详细信息,请参阅高亮伪元素继承部分。

试一试

p::selection {
  color: red;
  background-color: yellow;
}
<p>
  Select a fragment of this paragraph, to see how its appearance is affected.
</p>

允许的属性

只有特定的 CSS 属性可以与 ::selection 一起使用。

特别是,background-image 会被忽略。

语法

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

无障碍

不要仅仅出于美观原因覆盖选定文本的样式——用户可以根据自己的需要自定义它们。对于有认知障碍或技术知识较少的人来说,选择样式意外的更改可能会损害他们对功能的理解。

如果被覆盖,重要的是确保选定文本和背景颜色之间的对比度足够高,以便有低视力障碍的人能够阅读它。

颜色对比度是通过比较选定文本和选定文本背景颜色的亮度来计算的。为了符合当前的网页内容无障碍指南 (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 伪元素模块 Level 4
# selectordef-selection

浏览器兼容性

另见