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

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

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

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

定义和用法  
:first-line 选择器用于选取指定选择器的首行。  
注释：以下属性可与 :first-line 使用：  
 字体属性  
 颜色属性  
 背景属性  
 word-spacing  
 letter-spacing  
 text-decoration  
 vertical-align  
 text-transform  
 line-height  
 clear  
浏览器支持  
![在这里插入图片描述][20190123113826895.png]

所有主流浏览器都支持 :first-line 选择器。  
实例  
选择每个

元素的首行，并为其设置样式：

<!DOCTYPE html>
    <html>
    <head>
    <style>
    p:first-line
    {
    background-color:yellow;
    }
    </style>
    </head>
    
    <body>
    <h1>WWF's Mission Statement</h1>
    <p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
    </body>
    </html>

效果图  
![在这里插入图片描述][20190123113842622.png]  
[黄菊华老师的课程和资料][Link 1]

### 小程序应用 ###

> Wxml代码

<view>
      To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature
    </view>
    
    <view>
      黄菊华老师，浙江杭州余杭区，在平台查询老师名字就可以查询到老师的课程！
    </view>
    
    <text>
      To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature
    </text>
    
    <view>
      <text>
      黄菊华老师，浙江杭州余杭区，在平台查询老师名字就可以查询到老师的课程！
      </text>
    </view>

> Wxss代码

view::first-line{
      color:red;
    }
    
    text::first-line
    {
      color: green;
    }

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

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

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

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190123113826895.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7a0ce0b495814b74a81ff802530bb47c.png
[20190123113842622.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b494d97032c74e758ab0d5c5618f8d94.png
[Link 1]: http://www.4317.org/ke/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/262d0a3bc23343d18176671e0b4925c5.png
[-_WXSS_css]: https://ke.qq.com/course/371755?tuin=2b10d56
[WXSS_css_-_first-line]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/896bf8835ebb46f18a4d727f7bd22655.png