::selection 伪元素是文档中突出显示的部分。
它用于将样式应用于文档中已被用户突出显示的部分（例如在文本上单击和拖动鼠标）。
默认文本选择背景颜色为蓝色，该属性用于更改默认颜色。
只有少数 CSS 属性可用于设置 ::selection 伪元素的样式：
- 颜色
- 背景颜色
- 文字阴影
- 游标
- 插入符号颜色
- 轮廓及其简笔画
- text-decoration 及其相关属性
- 文字强调颜色
-moz- 前缀以 ::-moz-selection 的形式与这个选择器一起使用。
这个伪元素是在 CSS Selectors Level 3 中引入的，但被删除了，目前它在 Pseudo-Elements Level 4 中。
语法
::selection {
css declarations;
}
::selection 伪元素的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
::-moz-selection {
color: #eee;
background: #8ebf42;
}
::selection {
color: #eee;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>::selection selector example</h2>
<p>
经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
</body>
</html>
具有不同颜色的 ::selection 伪元素示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.green::-moz-selection {
background-color: #8ebf42;
}
.green::selection {
background-color: #8ebf42;
}
.yellow::-moz-selection {
background-color: #FFFF19;
}
.yellow::selection {
background-color: #FFFF19;
}
</style>
</head>
<body>
<h2>::selection selector example</h2>
<p>这是一个带有默认选择背景颜色的文本。</p>
<p class="green">选择此文本可查看绿色背景。</p>
<p class="yellow">选择此文本可查看黄色背景。</p>
</body>
</html>
带有 <textarea> 和 <input> 标签的 ::selection 伪元素示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
input::-moz-selection {
color: #1c87c9;
background-color: #eee;
}
input::selection {
color: #1c87c9;
background-color: #eee;
}
textarea::-moz-selection {
color: white;
background-color: #8ebf42;
}
textarea::selection {
color: white;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>::selection selector example</h2>
<p>Input element</p>
<form>
<input type="text" value="Select this input text" />
<p>Textarea element</p>
<textarea rows="5" cols="25">选择这个文本框中的文本</textarea>
</form>
</body>
</html>
日期：2020-06-02 22:14:46 来源：oir作者：oir