微信小程序-伪类选择器

一.伪类选择器

结构伪类常见书写方式:

第一类:找第几个孩子

复制代码
    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;
}

实现效果:

相关推荐
CRMEB定制开发10 分钟前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
mon_star°2 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero3 小时前
微信小程序91~100
微信小程序·小程序
假装我不帅3 小时前
微信小程序下拉加载更多实现
微信小程序·小程序
高压锅_12203 小时前
Cursor+Coze+微信小程序实战: AI春联生成器
人工智能·微信小程序·notepad++
2301_805962933 小时前
微信小程序控制空调之微信小程序篇
微信小程序·小程序
Ama_tor9 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
毛毛三由18 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
一只一只妖20 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app