::selection
::selection
CSS 伪元素 将样式应用于用户突出显示的文档部分(例如,单击并拖动鼠标穿过文本)。
试一试
允许的属性
只有某些 CSS 属性可以与 ::selection
一起使用
color
background-color
text-decoration
及其关联属性text-shadow
-webkit-text-stroke-color
、-webkit-text-fill-color
和-webkit-text-stroke-width
特别是,忽略了 background-image
。
语法
css
::selection {
/* ... */
}
无障碍访问
不要出于纯粹的美学原因覆盖选中文本样式 — 用户可以根据自己的需要自定义它们。对于遇到认知问题或技术水平较低的人来说,选择样式的意外更改可能会损害他们对功能的理解。
如果覆盖,则必须确保选择的文本和背景颜色之间的对比度比率足够高,以便视力较差的人能够阅读它。
颜色对比度比率是通过比较选中文本和选中文本背景颜色的亮度来找到的。为了满足当前的 Web 内容可访问性指南 (WCAG),文本内容必须具有4.5:1 的对比度比率,或者对于标题等较大的文本,对比度比率为 3:1。(WCAG 将大文本定义为介于 18.66px
和 24px
之间且为粗体,或 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 表格仅在浏览器中加载
另请参阅
pointer-events
- 控制元素上哪些事件处于活动状态