CSS - 伪元素 - ::selection

::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>

打印本页