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

电玩女神 2024-02-19 16:29 56阅读 0赞

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

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
定义和用法  
:first-letter 选择器用于选取指定选择器的首字母。  
注释：以下属性可与 :first-letter 使用：  
 字体属性  
 颜色属性  
 背景属性  
 外边距属性  
 内边距属性  
 边框属性  
 text-decoration  
 vertical-align（只有在 float 为 ‘none’ 时）  
 text-transform  
 line-height  
 float  
 clear  
浏览器支持  
![在这里插入图片描述][20190123113603672.png]  
所有主流浏览器都支持 :first-letter 选择器。  
实例  
选择每个

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

<!DOCTYPE html>
    <html>
    <head>
    <style>
    p:first-letter
    {
    font-size:200%;
    color:#8A2BE2;
    }
    </style>
    </head>
    <body>
    
    <h1>Welcome to My Homepage</h1>
    <p>My name is Donald.</p>
    <p>I live in Duckburg.</p>
    <p>My best friend is Mickey.</p>
    
    </body>
    </html>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]  
[防采集标记：黄菊华老师的课程和资料][Link 1]

### 小程序应用 ###

> Wxml代码

<view>huang ju hua</view>
    <view>黄菊华老师</view>
    
    <text>huang ju hua</text>
    
    <view>
      <text>huang ju hua</text>
    </view>

> Wxss代码

view::first-letter{
      color: red;
      font-size: x-large;
    }
    
    text::first-letter
    {
      color: red;
    }

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

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

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

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190123113603672.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a4fb7871ed0d46569dc600bb0a400f8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/27c4a61525834c75ae7163ee69247f23.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/c3dd68b956d04447a8efa5370499e556.png
[-_WXSS_css]: https://ke.qq.com/course/371755?tuin=2b10d56
[WXSS_css_-_first-letter]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5a2c29ae6e8b436e8dcb4ffab6932ac1.png