css字体选中时变色

在Web开发中，经常需要对文本内容进行选中（即鼠标左键拖拽），在选中文本时，我们可以通过CSS来改变选中内容的字体颜色，以展现更好的用户体验。

::selection {
    color: #fff;
    background-color: #007bff;
}

上面的CSS代码使用了CSS伪元素“::selection”，表示对选中的文本进行样式定义。在这里，我们设置了选中内容的字体颜色为白色，背景色为深蓝色。

需要注意的是，这种方式只对部分浏览器有效，比如Chrome、Firefox等现代浏览器，而Internet Explorer和Microsoft Edge则不支持。如果需要兼容旧版浏览器，可以使用JavaScript的代码来兼容：

document.addEventListener("DOMContentLoaded", function() {
//判断是否支持伪元素“::selection”if (window.getSelection) {
    var selection = window.getSelection();
if (selection.baseNode == selection.focusNode) {
    //获取选中范围的父元素（即选中文本的祖先元素）var parentEl = selection.baseNode.parentElement;
//为父元素绑定选中事件parentEl.addEventListener("mouseup", function() {
    //获取选中文本并设置样式var selectedText = window.getSelection().toString();
if (selectedText !== "") {
    parentEl.style.color = "#fff";
    parentEl.style.backgroundColor = "#007bff";
}
}
    );
}
}
}
    );
    

上述JavaScript代码通过判断是否支持伪元素“::selection”，在不支持时使用JavaScript来实现选中文本样式的改变。在这里，我们首先判断是否有选中的内容，然后获取父元素并为其绑定mouseup事件，最后获取选中内容并改变其字体颜色和背景色。

总之，无论是通过CSS还是JavaScript，我们都可以方便地实现文本选中后的样式改变，来提升用户体验和页面效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！