CSS - 伪元素 - ::selection

::selection 伪元素用于为文档或页面中用户通过交互（例如单击并拖动鼠标选择文本）突出显示的部分应用样式。

可以使用少量 CSS 属性与 ::selection 伪元素一起使用，如下所示

颜色属性
background-color
文本装饰及其相关属性
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>

打印页面