关于::selection的一点点思考

灰太狼 2021-11-16 10:01 427阅读 0赞

对于::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,下面实验一下：

.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