当前位置: 代码网 > it编程>编程语言>Javascript > 微信小程序伪类选择器的使用详解

微信小程序伪类选择器的使用详解

2024年07月02日 Javascript 我要评论
一.伪类选择器结构伪类常见书写方式:第一类:找第几个孩子 1. :first-child 找第一个孩子 2. :last-child 找最后一个孩子 3. :nth-child(),正着找

一.伪类选择器

结构伪类常见书写方式:

第一类:找第几个孩子

    1.    :first-child 找第一个孩子
    2.    :last-child 找最后一个孩子
    3.    :nth-child(),正着找
           数字:写数字几就是找第几个孩子,
           2n或者even:找偶数
           2n+1或者odd:找奇数
    4.    :nth-last-child(),倒着找
           数字:写数字几就是找倒数第几个孩子。

第二类: 从限定的类型中找第几个

    1.    :fist-of-type,从同类型中找出第一个孩子
    2.    :last-of-type,从同类型中找出最后一个孩子
    3.    :nth-of-type(数字),从同类型中找出第几个个孩子

微信小程序中使用

在wxml中写一个列表渲染

<view wx:for="{{numlist}}" wx:key="*this">{{item}}</view>

使用伪类选择器

view{
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
view:nth-child(odd){ //奇数
  background-color: lightblue;
}
view:nth-child(even){ //偶数
  background-color: lightcoral;
}

实现效果:

在这里插入图片描述

到此这篇关于微信小程序伪类选择器的文章就介绍到这了,更多相关微信小程序伪类选择器内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com