改变网页文本选中的默认背景颜色

红太狼 2022-07-24 04:12 275阅读 0赞

>  改变网页文本选中的默认背景颜色，可以更好的突出你的主题色调，使你的网站更有个性与美观 。

####  **效果图** ####

--------------------

**默认**

![这里写图片描述][20160512133211119]

**改变后**

![这里写图片描述][20160512133223479]

####  **源码分析** ####

--------------------

文本选中是默认蓝色背景与白色字体，与主题色调不搭，所以我们可以设置自己想要的颜色。

代码：

效果：

![这里写图片描述][20160512133620140]

我们会发现颜色被改变了。

如果说，你不想定义全局，也可以用CSS 定义局部标签内容文字选中后的样式状态。  
比如，定义只定义第一段是文字选中绿色背景。

代码：

效果：

![这里写图片描述][20160512171212595]

index.html

<div class="panel-body">
        <h2>Ghost 桌面版 APP 正式发布，能同时管理多个 Ghost 博客</h2>
        <p>作者：<font color="#5CB85C">wenteryan</font>  • 2016年5月12日</p>
        <br>
        <p class="first_p">虽然通过浏览器管理 Ghost 博客虽然很方便，但是在多个 tab 之间切换有时候也会很麻烦，嗯，如果能有一个独立的 app 应该使用起来会更爽一些！</p>
    <p>今天的主角来了，Ghost 桌面版 APP -- Ghost Desktop！</p>
    <p>目前，Ghost Desktop 还处于早期阶段，但是已经是一个全功能版本了，并且 Ghost Desktop 运行良好，支持自动更新，已经完全支持 Mac、Windows 和 Linux 平台了。补充一下，Ghost Desktop 是完全开源的（这还用说吗？）。</p>
    <p>其实 Ghost Desktop 于数周前就已经开放给大家预览了。</p>
    <p>众所周知，Ghost 是一个有非盈利组织支持的开源项目。Ghost Desktop 由志愿者 Felix Rieseberg 独立开发的，并且他还是一位微软的开源布道者。</p>
    <p>官方下载地址（且慢点击，先看下面）：https://ghost.org/downloads/</p>
        </p>
        <br>
        <a href="zxingcoder" class="btn btn-success" type="submit">下一篇</a>
      </div>
    </div>
    </div>

####  **总结** ####

--------------------

本文其实没有什么内容，小技巧展示而已。如果文中有什么表述不准确的地方欢迎指正，也欢迎通过评论进行交流。

[20160512133211119]: /images/20220722/72d22ff99e7042459c7de8df4de3dfb9.png
[20160512133223479]: /images/20220722/b12d7cb5f3c94980ba42003cd61034de.png
[20160512133620140]: /images/20220722/7f1ce167d2c14b77a206b0b90eadc1ba.png
[20160512171212595]: /images/20220722/2dfc5bca06394fc19854460736370349.png