上一篇：《RGBA与Opacity区别小解》
今天说一个简单的伪元素::selection，它的用武之地仅在于改变选中文本时文本的颜色和文本背景颜色。
网页默认选择文本后，文字颜色为白色，文字背景颜色为蓝色，要改变这种选择样式，可以使用::selection伪元素来分别设置文本颜色和文本背景颜色。
在线查看高清无码效果可以猛戳这里这里或直接点击下面的网址：
http://codepen.io/myvin/pen/bdLXvK
给出例子，先来个段落：
立即学习“前端免费学习笔记（深入）”；
HTML Markup:
<p>十八新娘八十郎，苍苍白发对红妆。 鸳鸯被里成双夜，一树梨花压海棠。</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/1353">
<img src="https://img.php.cn/upload/ai_manual/001/431/639/68b6d5a0eb7c7595.png" alt="腾讯AI 开放平台">
</a>
<div class="aritcle_card_info">
<a href="/ai/1353">腾讯AI 开放平台</a>
<p>腾讯AI开放平台</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="腾讯AI 开放平台">
<span>381</span>
</div>
</div>
<a href="/ai/1353" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="腾讯AI 开放平台">
</a>
</div>
样式修饰:
p::selection{ background-color: red; color:blue;}效果如下：
这里有两点需要注意：
在CSS3中selection伪元素使用双冒号::，不能使用单冒号:，写单冒号不会起到selection的作用，因为在CSS3规范中规定：
在CSS2中伪类和伪元素都使用单冒号:，但是在FF37.0.2版本和Chrome 43.0.2357.130版本中，单冒号:selection不起作用，before和after起作用
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
816
收藏
