微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:only-of-type 伪类

本是古典何须时尚 2024-02-19 16:29 31阅读 0赞

### 小程序中的WXSS(css)选择器课程-伪类-:only-of-type 伪类 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
定义和用法  
:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。  
浏览器支持  
![在这里插入图片描述][20190123112514119.png]  
所有主流浏览器均支持 :only-of-type 选择器，除了 IE8 及更早的版本。  
实例  
指定属于父元素的特定类型的唯一子元素的每个 p 元素：

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    p:only-of-type
    {
    background:#ff0000;
    }
    </style>
    </head>
    
    <body>
    
    <div>
    <p>这是一个段落。</p>
    </div>
    
    <div>
    <p>这是一个段落。</p>
    <p>这是一个段落。</p>
    </div>
    
    </body>
    </html>

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

### 小程序应用 ###

[防采集标记：黄菊华老师的课程和资料][Link 1]

> Wxml代码

> Wxss代码

text:only-of-type{
      color: red;
    }

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

[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中的WXSS(css)选择器课程][-_WXSS_css]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190123112514119.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c5ed8a6fe068430184aa6fff44e822bd.png
[20190123112533272.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6e483b41b0f0412a8f021f0ccd87f7f5.png
[Link 1]: http://www.4317.org/ke/
[20190123112759327.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ca67c26bd21d4f6994c119e54b8558b0.png
[-_WXSS_css]: https://ke.qq.com/course/371755?tuin=2b10d56
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/716bb8d9b4d14dda94fe67d7d27423c6.png