微信小程序界面设计小程序中的WXSS(css)选择器课程-::selection 伪元素

太过爱你忘了你带给我的痛 2024-02-19 16:29 129阅读 0赞

### 小程序中的WXSS(css)选择器课程-::selection 伪元素 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
定义和用法  
::selection 选择器匹配被用户选取的选取是部分。  
只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。  
浏览器支持  
![s][]  
IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。  
Firefox 支持替代的 ::-moz-selection。  
实例  
使被选中的文本成为红色：

<!DOCTYPE html>
    <html>
    <head>
    <style>
    ::selection
    {
    color:#ff0000;
    }
    ::-moz-selection
    {
    color:#ff0000;
    }
    </style>
    </head>
    <body>
    
    <h1>请试着选取页面上的文本</h1>
    
    <p>这是一个段落。</p>
    
    <div>这是 div 元素中的文本。</div>
    
    <br>
    
    <a href="http://www.w3school.com.cn" target="_blank">访问 W3School ！</a>
    
    </body>
    </html>

效果图  
![在这里插入图片描述][2019012311413218.png]

[黄菊华老师的课程和资料][Link 1]

### 小程序应用 ###

注意：不支持

> Wxml代码

> Wxss代码

::selection{
      color: red;
    }

效果图  
![在这里插入图片描述][20190123114210708.png]  
![微信小程序界面设计小程序中的WXSS(css)选择器课程-::selection 伪元素][WXSS_css_-_selection]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[s]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/922fb3e60ac945a9a4a5f9a0bc744193.png
[2019012311413218.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6dcc57e6112749f8886b80db9b5ef692.png
[Link 1]: http://www.4317.org/ke/
[20190123114210708.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d001848e6e3348708469258b5ef936bb.png
[WXSS_css_-_selection]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c3ad099a331b441e8aac1f9632f69623.png