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

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

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

定义和用法
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
提示：请参阅 :nth-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素。
浏览器支持

所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本。
实例
规定属于其父元素的第二个子元素的每个 p 的背景色：

这是标题
第一个段落。
第二个段落。
第三个段落。
第四个段落。

注释：Internet Explorer 不支持 :nth-child() 选择器。

效果图

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

小程序应用

Wxml代码

  文本文字
  文本文字
  文本文字
  标签
  链接文字
  链接文字

Wxss代码

text:nth-child(2)
{
  color: red;
}
label:nth-child(1)
{
  color: green;
}

效果图

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