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

更新时间：2024年06月20日 10:54:58 作者：井眼

这篇文章主要介绍了微信小程序伪类选择器的使用详解,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

一.伪类选择器

结构伪类常见书写方式：

第一类：找第几个孩子

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

实现效果：

在这里插入图片描述

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

您可能感兴趣的文章:

JavaScript中正则表达式的实际应用详解
这篇文章主要给大家介绍了关于JavaScript中正则表达式实际应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
利用javascript实现web页面中指定区域打印
将需要打印的课程表的table放入div标签中，然后指定出需要打印的区域，最后调用window.print打印指定内容
2013-10-10
微信小程序自定义多列选择器使用
这篇文章主要为大家详细介绍了微信小程序自定义多列选择器使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
js判断一个字符串是否包含一个子串的方法
这篇文章主要介绍了js判断一个字符串是否包含一个子串的方法,实例分析了判断的技巧与第三方脚本的使用方法,需要的朋友可以参考下
2015-01-01
JS 可选链的三种形势及好处详解
这篇文章主要为大家介绍了JS 可选链的三种形势及好处详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
uniapp调用百度语音实现录音转文字功能
这篇文章主要介绍了uniapp通过调用百度语音，实现录音转文字的功能。文中的示例代码对我们学习或工作有一定的帮助，感兴趣的小伙伴可以跟随小编学习一下
2021-12-12
TypeScript Type Innference(类型判断)
TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。接下来通过本文给大家介绍TypeScript Type Innference(类型判断)的相关知识，需要的朋友参考下
2016-03-03
js实现控制文件拖拽并获取拖拽内容功能
本片文章主要给大家分享了用JS写出控制文件拖拽并获取拖拽内容功能实现过程，以及代码分享，有兴趣的一起学习下。
2018-02-02
JavaScript中常见陷阱小结
JavaScript中常见陷阱，都是一些实际应用中，需要注意的地方，需要的朋友可以参考下。
2010-04-04
js模拟实现烟花特效
这篇文章主要为大家详细介绍了js模拟实现烟花特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03