::selection 伪元素用于将样式应用于文档或页面中已由用户干预(如单击和拖动鼠标以选择文本)突出显示的部分。
一小部分 CSS 属性可以与 ::selection 伪元素一起使用,如下所示:
- Color 属性
- background-color
- text-decoration 及其相关属性
- text-shadow
- webkit-text-stroke-color, -webkit-text-fill-color 和 -webkit-text-stroke-width
将忽略 background-image 属性。
语法
selector::selection {
/* ... */
}
辅助功能问题:
- 出于美观原因,不建议覆盖选定的文本样式。
- 如果文本样式已被覆盖,请确保为文本应用高对比度,因为这对用户来说是清晰的。
- 在 Windows 高对比度模式下,当用户输入的文本使用与占位符文本相同的样式呈现时,很难区分占位符文本和输入的文本。
- 占位符不能替代 <label> 元素。辅助技术无法解析 <input> 元素。
CSS ::selection 示例
下面是 ::selection 伪元素的示例:
<html>
<head>
<style>
.highlight::selection {
color: yellow;
background: brown;
}
</style>
</head>
<body>
<p class="highlight">Select Me!!! to see the effect.</p>
<p>No style applied to me.</p>
</body>
</html>