微信小程序-伪类选择器

一.伪类选择器

结构伪类常见书写方式:

第一类:找第几个孩子

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

实现效果:

相关推荐
xkxnq1 小时前
微信小程序列表数据上拉加载,下拉刷新
微信小程序·小程序
The_era_achievs_hero1 小时前
微信小程序161~170
微信小程序·小程序·notepad++
難釋懷2 小时前
微信小程序案例 - 本地生活(列表页面)
微信小程序·生活·notepad++
游戏开发爱好者813 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang14 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金16 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq17 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷17 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯17 小时前
小程序自定义组件学习笔记
微信小程序
阿眠19 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache