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

素颜马尾好姑娘i 2024-02-19 16:27 42阅读 0赞

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

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

定义和用法  
:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。

n 可以是数字、关键词或公式。

提示：请参阅 :nth-last-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关，从最后一个子元素开始计数。  
浏览器支持  
![在这里插入图片描述][2019012311161112.png]

所有主流浏览器均支持 :nth-last-of-type() 选择器，除了 IE8 及更早的版本。  
实例  
规定属于其父元素的第二个 p 元素的每个 p，从最后一个子元素开始计数：

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    p:nth-last-of-type(2)
    {
    background:#ff0000;
    }
    </style>
    </head>
    <body>
    
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
    
    </body>
    </html>

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

### 小程序应用 ###

> Wxml代码

> Wxss代码

text:nth-last-of-type(1)
    {
      color: red;
    }

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

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

![微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-last-of-type()伪类][WXSS_css_-_-_nth-last-of-type]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[2019012311161112.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e82cc8c757f744dda66e33d6eb507697.png
[20190123111629316.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2cc65e807dc840bda424e356fd002e50.png
[Link 1]: http://www.4317.org/ke/
[20190123111706922.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5850428060a94b2cab556c31a044528c.png
[-_WXSS_css]: https://ke.qq.com/course/371755?tuin=2b10d56
[WXSS_css_-_-_nth-last-of-type]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a5191e07bcbf4ca8841fce691e804d10.png