当前位置: 首页 > news >正文

微信小程序-伪类选择器

一.伪类选择器

结构伪类常见书写方式:

第一类:找第几个孩子

    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;
}

实现效果:
在这里插入图片描述

相关文章:

  • 【少儿编程Python:趣味编程,探索未来】第一章 启航编程之旅,开启智慧之门
  • 系统思考与创新解决
  • Django 条件判断模板标签
  • 【深度学习驱动流体力学】计算流体力学openfoam-paraview与python3交互
  • 动态创建接口地址
  • 探索Agent AI智能体的未来
  • Lua迭代器详解(附加红点功能实例)
  • Java学习 - 网络IP协议簇 讲解
  • css-vxe列表中ant进度条与百分比
  • RabbitMQ消息队列 安装及基本介绍
  • STM32项目分享:家庭环境监测系统
  • 【mysql】关键词搜索实现
  • Highcharts 饼图
  • Python爬虫-贝壳二手房“改进版”
  • 深入了解 Android 中的 ViewStub
  • 【跃迁之路】【669天】程序员高效学习方法论探索系列(实验阶段426-2018.12.13)...
  • docker容器内的网络抓包
  • Java反射-动态类加载和重新加载
  • Java知识点总结(JavaIO-打印流)
  • js中forEach回调同异步问题
  • Laravel 菜鸟晋级之路
  • Objective-C 中关联引用的概念
  • Spring Cloud中负载均衡器概览
  • VUE es6技巧写法(持续更新中~~~)
  • Xmanager 远程桌面 CentOS 7
  • 从零开始的无人驾驶 1
  • 从伪并行的 Python 多线程说起
  • 如何学习JavaEE,项目又该如何做?
  • 手写一个CommonJS打包工具(一)
  • 学习笔记TF060:图像语音结合,看图说话
  • const的用法,特别是用在函数前面与后面的区别
  • ​【数据结构与算法】冒泡排序:简单易懂的排序算法解析
  • ​ssh免密码登录设置及问题总结
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • # 数仓建模:如何构建主题宽表模型?
  • #define 用法
  • (2024,Vision-LSTM,ViL,xLSTM,ViT,ViM,双向扫描)xLSTM 作为通用视觉骨干
  • (Java)【深基9.例1】选举学生会
  • (JS基础)String 类型
  • (poj1.2.1)1970(筛选法模拟)
  • (安卓)跳转应用市场APP详情页的方式
  • (超简单)构建高可用网络应用:使用Nginx进行负载均衡与健康检查
  • (六)软件测试分工
  • (七)Activiti-modeler中文支持
  • (一)Mocha源码阅读: 项目结构及命令行启动
  • (转)Unity3DUnity3D在android下调试
  • (状压dp)uva 10817 Headmaster's Headache
  • (自用)gtest单元测试
  • .net core 依赖注入的基本用发
  • .NET Core中Emit的使用
  • .NET Framework .NET Core与 .NET 的区别
  • .Net 代码性能 - (1)
  • .NET/C# 避免调试器不小心提前计算本应延迟计算的值
  • .NET/C# 如何获取当前进程的 CPU 和内存占用?如何获取全局 CPU 和内存占用?
  • .NET8.0 AOT 经验分享 FreeSql/FreeRedis/FreeScheduler 均已通过测试