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>

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

参考地址
CSS3 ::selection 选择器

猜你喜欢

转载自blog.csdn.net/mouday/article/details/125407445