css：selection自定义用户选中部分背景颜色样式

实现效果

当用户选中页面中的文字，修改默认的文字颜色和背景色

演示代码

<style>
    .main{
        text-align: center;
    }

    .content {
        white-space: pre-line;
        margin-top: 20px;
    }

    /* E9+, Opera, Google Chrome和Safari */
    .content::selection {
        color: #ffffff;
        background-color: #ff0000;
    }

    /* Firefox */
    .content::-moz-selection {
        color: #ffffff;
        background-color: #ff0000;
    }

</style>

<div class="main">
    <div class="title">丁洲怀古</div>
    <div class="author">王绪〔清代〕</div>
    <div class="content">特统精兵御上游，
    笳吹先遁惊若鸥。
    扬州空把残旗耀，
    赢得舟中骂不休。
    </div>
</div>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
 

在线Demo: https://mouday.github.io/front-end-demo/selection.html

参考地址
CSS3 ::selection 选择器

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/125407445