关于::selection的一点点思考

最新推荐文章于 2025-08-20 02:52:12 发布

weixin_30455365

最新推荐文章于 2025-08-20 02:52:12 发布

阅读量185

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/joyho/articles/2989932.html

本文详细介绍了CSS中::selection伪元素选择器的使用方法，包括如何改变文本被选中时的背景色和前景色。通过实例展示了::selection选择器的局限性，即仅能设置颜色和背景色，其他样式如字体大小不会生效。

对于::selection这个选择器，也许会感到陌生，但是在新手学习基础的时候肯定会遇上，只是因为用得不多，所以它容易让人忘记。

用::selection我们可以改变被选择文本的前景色和背景色。

.container ::selection{
    background:#C00;
    color:#fff;
    }

<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ornare vulputate mi. Nullam auctor pede sit amet odio varius consectetuer. Fusce bibendum neque eu purus. Donec et nulla at odio volutpat luctus. Cras facilisis consequat nisi. Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum quis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed felis. Phasellus enim. Aliquam malesuada mi eu erat. Suspendisse potenti. In diam ante, sagittis vel, rutrum at, fringilla pulvinar, nunc.
</p>
</div>

效果如下：（用鼠标选择下面的文本，效果就出来啦！）

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ornare vulputate mi. Nullam auctor pede sit amet odio varius consectetuer. Fusce bibendum neque eu purus. Donec et nulla at odio volutpat luctus. Cras facilisis consequat nisi. Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum quis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed felis. Phasellus enim. Aliquam malesuada mi eu erat. Suspendisse potenti. In diam ante, sagittis vel, rutrum at, fringilla pulvinar, nunc.

但是如果我们再加多一点效果呢？比如让文本被选择时字体大小为30px,下面实验一下：

<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ornare vulputate mi. Nullam auctor pede sit amet odio varius consectetuer. Fusce bibendum neque eu purus. Donec et nulla at odio volutpat luctus. Cras facilisis consequat nisi. Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum quis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed felis. Phasellus enim. Aliquam malesuada mi eu erat. Suspendisse potenti. In diam ante, sagittis vel, rutrum at, fringilla pulvinar, nunc.
</p>
</div>

.container ::selection{
    background:#C00;
    color:#fff;
    font-size:30px;
    }

选择下面的文本就能出效果啦！（事实证明font-size:30px没效果）

自己再实验了几下下，发现只有background和color生效。这是不是验证了：“::selection”只能设置两个属性，一个就是background,另一个就是color属性，设置其他属性是没有任何效果的。

转载于:https://www.cnblogs.com/joyho/articles/2989932.html