CSS伪类selection的应用和使用说明

CSS的伪类::selection用于在用户选中文字时设置高亮样式，在前端切图工作中使用较为高频。默认的CSS选中文字时的样式为蓝色背景白色字体。在一些个性化的页面中，使用::selection伪类可以达到个性化的目的。

在::selection伪类的使用过程中，需要注意的是，::selection伪类支持的属性是有限的（只有一小部分）。目前仅支持以下几个属性。

• color（颜色属性）
• background-color（背景属性）
• cursor（鼠标样式）
• caret-color
• outline
• text-decoration
• text-emphasis-color
• text-shadow

其余的属性暂且均不支持，大多数情况下，一般只设置字体颜色及背景属性，有时也会设置文字重点标识属性。注意text-emphasis属性是不被支持的。

另外，需要注意：在设置了::selection伪类的情况下，如果不设置背景颜色或者字体颜色中的一个时，属性会继承父类元素，但是如果不设置::selection伪类或者::selection里既不设置背景色也不设置字体颜色时，则会使用浏览器默认设置（字体白色，背景蓝色），具体可参考如下示例：

<p>
	<a href="https://www.qietujiang.com/">切图匠</a>旨在为存在网络技术需求的企业和团体提供专业的前后端技术支持及外包服务。
</p>

示例一：

p::selection{ color: darkblue; background: lightpink;}

效果：

注意：P元素里嵌套A标签，给P元素设置选中样式，不会影响到A标签，需要单独设置，如下：

p::selection{
  color: darkblue; background: lightpink;
}
p a::selection{ color: darkorange; background: lightskyblue;}

效果：

这里需要注意的是：A标签的选中样式，可以通过a::selection或者p a::selection进行设置，但是如果设置为：p::selection a::selection则是无效的；这一点不同于其他的CSS伪类（如hover等）。

示例二：仅设置字体颜色

p::selection{ color: darkblue;}

效果：

注意：段落背景样式为透明（P段落样式）

示例三：仅设置背景颜色

p::selection{ background: lightpink;}

效果：

示例四：::selection即不设置字体颜色也不设置背景色

p::selection{ }

效果：

即：选中样式为浏览器默认样式。

关于::selection选中样式的设置，虽是一个非常简单的伪类，还是希望大家注意到其中的一些注意事项，这对我们学习其他的CSS属性会有所帮助。