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

╰半夏微凉° 2024-02-19 16:24 9阅读 0赞

### 小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
定义和用法  
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。  
浏览器支持  
![在这里插入图片描述][20190123105205553.png]  
所有主流浏览器都支持 :first-child 选择器。  
注释：对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。  
实例  
选择属于其父元素的首个子元素的每个

元素，并为其设置样式：

<!DOCTYPE html>
    <html>
    <head>
    <style>
    p:first-child
    {
    background-color:yellow;
    }
    </style>
    </head>
    <body>
    
    <p>这个段落是其父元素（body）的首个子元素。</p>
    
    <h1>欢迎访问我的主页</h1>
    <p>这个段落不是其父元素的首个子元素。</p>
    
    <div>
    <p>这个段落是其父元素（div）的首个子元素。</p>
    <p>这个段落不是其父元素的首个子元素。</p>
    </div>
    
    <p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。</p>
    
    </body>
    </html>

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

### 小程序应用 ###

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

> Wxml代码

<view>文本文字，红色</view>
    
    <view>
      <text>文本文字，颜色不变</text>
    </view>
    
    <view>
      01，颜色不变
      <view>文本文字，红色</view>
    </view>
    
    <view>
      <text>文本文字，颜色不变</text>
      <view>文本文字，颜色不变</view>
    </view>
    
    <view>
      <view>文本文字，红色</view>
      <view>文本文字，颜色不变</view>
      <text>文本文字，颜色不变</text>
    </view>

> Wxss代码

view:first-child{
      color: red;
    }

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

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

![微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类][WXSS_css_-_-_first-child]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190123105205553.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e9674cb5cb164b229f61f4f9d985a6cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b9dda23d3d9d453f9a6d5e6fb8404f01.png
[Link 1]: http://www.4317.org/ke/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ede791bb1d1640d1ad036faed99b3237.png
[-_WXSS_css]: https://ke.qq.com/course/371755?tuin=2b10d56
[WXSS_css_-_-_first-child]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5df70ce5455545d981434fc1c93b64c1.png