改变文字选中时背景颜色

来源：互联网发布：55开笑笑事件知乎编辑：程序博客网时间：2024/05/16 08:59

在线演示

这里写图片描述

html:

<body>    <h1>Woman</h1>    <p>Every woman is ... You are worth it! </p></body>

css：

<style>    body {        background:url(images/09.png) no-repeat 50% 0;        margin: 10% 20%;        color: #fff;        text-shadow: 1px 2px 0 rgba(0,0,0,.75);         background-attachment: fixed;/* 背景图片固定，不随文字的滚动而滚动 */            }    h1 {        text-transform: uppercase; /*英文字母全部大写*/        border-bottom: 2px solid #fff;        padding-bottom: 50px;    }    p {        font-size: 20px;    }    ::selection {  /*设置选中区域文字背景变化*/        text-shadow: none;        color: #fff;        background-color: #e74c3c;/*为选中文字设置背景颜色*/    }</style>

解析：
通过selection伪元素来实现反选样式。
只能向::selection应用少量的CSS属性，如color、background、cursor、及outline等。

0 0