如何在突出显示文本时更改背景颜色
要在突出显示文本时更改背景颜色，只需使用 ::selection 设置元素样式并为 background-color 属性设置首选颜色。
使用 ::selection 更改背景颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.green::-moz-selection {
background-color: #8ebf42;
}
.green::selection {
background-color: #8ebf42;
}
.yellow::-moz-selection {
background-color: #ffcc00;
}
.yellow::selection {
background-color: #ffcc00;
}
</style>
</head>
<body>
<p>这是具有默认选择背景色的文本</p>
<p class=“green”>选择此文本可看到绿色背景</p>
<p class=“yellow”>选择此文本可看到黄色背景</p>
</body>
</html>
如果我们不想在选择时使用任何背景颜色，只需设置 background-color 属性的“透明”值。
如何在突出显示文本时更改字体颜色
要更改元素的颜色，只需使用 ::selection 伪元素设置元素的样式。
使用 ::selection 更改元素颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.green::-moz-selection {
color: #8ebf42;
}
.green::selection {
color: #8ebf42;
}
.purple::-moz-selection {
color: #b30cb3;
}
.purple::selection {
color: #b30cb3;
}
.orange::-moz-selection {
color: #ffa500;
}
.orange::selection {
color: #ffa500;
}
.lightblue::-moz-selection {
color: #add8e6;
}
.lightblue::selection {
color: #add8e6;
}
</style>
</head>
<body>
<p class="green">
选择此文本以查看绿色字体颜色。
</p>
<p class="orange">
选择此文本以查看橙色字体颜色。
</p>
<p class="purple">
选择此文本以查看紫色字体颜色。
</p>
<p class="lightblue">
选择此文本以查看淡蓝色字体颜色。
</p>
</body>
</html>
如何在选择文本时更改文本阴影颜色
进一步使用 ::selection 伪元素并添加、删除或者更改甚至选择文本阴影效果的类型。
我们只需要为 ::selection 伪元素指定 text-shadow 属性。
更改文本阴影类型的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
/* before selection */
.shadow2 {
text-shadow: 1px 1px 1px;
}
.shadow3 {
text-shadow: 1px 2px 4px #000;
}
.shadow4 {
text-shadow: 1px 2px 4px;
}
/* after selection */
.shadow1::-moz-selection {
text-shadow: 1px 1px 1px;
background-color: transparent;
}
.shadow1::selection {
text-shadow: 1px 1px 1px;
background-color: transparent;
}
#shadow2::-moz-selection {
text-shadow: none;
background: #fffae6;
}
.shadow2::selection {
text-shadow: none;
background: #fffae6;
}
.shadow3::-moz-selection {
text-shadow: 1px 1px 2px #222;
}
.shadow3::selection {
text-shadow: 1px 1px 2px #222;
}
.shadow4::-moz-selection {
text-shadow: 1px 2px 4px #208A28;
background-color: transparent;
color: #208A28;
}
.shadow4::selection {
text-shadow: 1px 2px 4px #208A28;
background-color: transparent;
color: #208A28;
}
</style>
</head>
<body>
<p class=“shadow1”>选择此文本以获取文本阴影</p>
<p class=“shadow2”>选择此文本以删除文本阴影</p>
<p class=“shadow3”>选择此文本以使文本更清晰</p>
<p class=“shadow4”>选择此文本可更改文本阴影的颜色</p>
</body>
</html>
如何更改图像选择颜色
在 ::selection 伪元素的帮助下更改图像选择的颜色。
请参阅给定的示例以获得清晰的理解。
使用 ::selection 更改图像选择颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
padding: 10px;
}
#img2::-moz-selection {
background-color: #d9d9d9;
}
#img2::selection {
background-color: #d9d9d9;
}
</style>
</head>
<body>
<p>其中第二个图像的选择颜色设置为灰色</p>
<p>选择两个图像以查看差异</p>
<img id="img1" src="/notebook.jpeg" alt="Aleq">
<img id="img2" src="/notebook.jpeg" alt="Aleq">
</body>
</html>
每次用户选择要突出显示的文本时，它都会自动采用一些背景颜色，有时也会更改文本的颜色。
如果我们之前没有注意到，请选择这句话以查看文本之外的背景颜色。
如果默认的蓝色让我们感到困扰或者出于任何原因，可能与设计有关，我们需要更改高亮颜色，CSS3 提供了这个机会！
::selection 伪元素是 CSS3 的一项很酷的特性，它覆盖了浏览器级别或者系统级别的文本高亮颜色，并且可以为用户选择的文本指定颜色和背景。
我们可以更改某些特定元素或者整个的颜色或者背景颜色。
但是可以与这个伪选择器一起使用的实际属性非常有限。
本质上，在 ::selection 伪元素的帮助下，只能更改 3 个属性的值，例如颜色、背景颜色和文本阴影。
在本文中，我们将展示对每个属性的影响。
为了浏览器兼容性，使用 -moz- 属性扩展来获得 Firefox 的支持 (::-moz-selection)。
如何在选择文本时更改文本区域和输入字段颜色
还可以更改 <textarea> 和 <input> 字段的文本选择颜色。
更改 <textarea> 和 <input> 的文本选择颜色的示例：
<!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>
<p>Input element</p>
<form>
<input type="text" value="Select this input text" />
</form>
<p>Textarea element</p>
<textarea rows="5" cols="25">选择此文本区域文本</textarea>
</body>
</html>
如何将选择效果应用于整个页面
如果我们希望在的整个页面上具有相同的效果，将高亮效果应用于特定元素可能是浪费时间。
使用 ::selection 伪元素，我们可以设置整个页面的选择颜色，而无需将其应用于某些元素。
为整个页面设置选择颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
::-moz-selection {
color: #fff;
background-color: #8ebf42;
}
::selection {
color: #fff;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h3>选择此页面上的多个元素，并查看整个页面的选择颜色设置为白色，背景颜色设置为绿色。</h3>
<p>经历过风雨，才懂得阳光的温暖。 生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
<img src="/notebook.jpeg" alt="Aleq">
</body>
</html>
::selection 声明具有广泛的浏览器支持。
Firefox 的兼容性问题在选择器前的 -moz- 前缀的帮助下得到修复。
谈到平板电脑或者移动设备，iOS Safari 和 Opera Mini 仍然不支持此选择器。
不建议依赖非标准化的 CSS 特性，因为 Web 浏览器可能会随时在不通知的情况下取消对非官方 CSS 选择器或者伪元素的支持。
因此，严格将它们视为对访问者整体体验的非必要补充，并准备好随时“中断”。
按照我们的配色方案（而不是使用暗蓝色背景选择颜色）使用此伪元素来设计网页样式，可以使看起来更有吸引力。
对于站点的某些特定部分，我们可以选择选定的背景颜色或者为每个部分应用不同的背景颜色。
更改默认选择属性总是可以带来更好的视图，从而带来更好的用户体验。
如何对一页中的相同元素产生不同的选择效果
假设我们有四个段落，并且我们希望为每个段落设置特定的选择颜色。
我们需要做的是使用不同的类更改页面的不同段落或者不同部分的选择颜色。
更改不同段落的选择颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p.green::selection {
background: #8ebf42;
}
p.green::-moz-selection {
background: #8ebf42;
}
p.blue::selection {
background: #1c87c9;
}
p.blue::-moz-selection {
background: #1c87c9;
}
p.yellow::selection {
background: #ffcc00;
}
p.yellow::-moz-selection {
background: #ffcc00;
}
p.red::selection {
background: #ff6666;
}
p.red::-moz-selection {
background: #ff6666;
}
</style>
</head>
<body>
<p class=“green”>选择文本以查看绿色突出显示颜色</p>
<p class=“blue”>选择文本以查看蓝色突出显示颜色</p>
<p class=“yellow”>选择文本以查看黄色突出显示颜色</p>
<p class=“red”>选择文本以查看红色突出显示颜色</p>
</body>
</html>
即使样式块在做同样的事情，选择器也不能组合。
如果我们将它们组合起来，它将不起作用，因为如果浏览器不理解其中的一部分，或者它是无效的，则浏览器会忽略整个选择器。