微信小程序first-child 和 last-child 失效,设置后不起作用~

问题:在不确定有多少个子项的前提下,需要给最后一个子项添加一个样式.
使用了last-child不生效.
解决办法:在detailData外面包一个父元素,相当于li里的ul一样.

附一个代码片段

//wxml
<view class="box"><view class="floor">一楼</view><view class="floor">二楼</view><view class="floor">三楼</view><view class="floor">四楼</view><view class="bottom-bar">查看</view>
</view>//wxss
.floor:last-child{color: blue;
}
//这样发现根本无效,解决办法:给1楼和4楼中间包一个父元素
<view class="box"><view><view class="floor">一楼</view><view class="floor">二楼</view><view class="floor">三楼</view><view class="floor">四楼</view></view><view class="bottom-bar">查看</view>
</view>//这样就可以完美找到最后一个元素~

欢迎留言交流~

微信小程序first-child 和 last-child 失效,设置后不起作用~相关推荐

微信小程序（购物车）--在wxml中设置保留小数位数
微信小程序(购物车)–在wxml中设置保留小数位数一.在该页面文件夹下新建一个wxs后缀的文件 var filters = {toFix: function (value) {return valu ...
微信小程序富文本渲染(rich-text)换行失效
微信小程序富文本渲染(rich-text)换行失效给rich-text标签加css 样式 white-space: pre;
微信小程序自学笔记-----文本和字体样式设置
微信小程序自学笔记-----文本和字体样式设置用于自己自学微信小程序知识点总结,新手小白一枚,请大佬勿喷知识要点 · 各种字体样式属性命名及含义 · 利用style和class设置字体样式的方法 ...
【仿12348的法律咨询平台微信小程序源代码，可以在线留言、设置打赏金额、查看其他人的法律问题等功能】
仿12348的法律咨询平台微信小程序源代码,可以在线留言.设置打赏金额.查看其他人的法律问题等功能. CSDN下载地址:https://download.csdn.net/download/u0109 ...
关于微信小程序textarea中的maxlength属性失效问题
关于微信小程序textarea中的maxlength属性失效问题代码菜鸡今天在编写小程序前端代码时,遇到了一个问题:textarea输入140个字以后,就再也输不进去了,想着设置一下maxlengt ...
微信小程序：enablePullDownRefresh、onReachBottomDistance 、动态设置窗口的背景色、动态设置下拉背景字体
一.enablePullDownRefresh 1.下拉刷新enablePullDownRefresh的支持单页面配置json文件 {"enablePullDownRefresh" ...
微信小程序中，将一张图设置成背景图的几种方式
三种方法实现 1.使用网络图片 <view class="page" style=" background-image: url('{{ossHost}}nmxy/ ...
在微信小程序中使用uView rules 表单校验 validator 不起作用（无效）
注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 onReady() {// 如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则this ...
2小时教会你用微信小程序做高端大气的简历，后带发布上线教程---面试宝典
前言: 本文章教你如何用微信小程序开发简历,使HR和面试官耳目一新~ 学习要求:懂得基本的Css语法,Js语法,Flex页面布局,以及拥有一个自己注册好的微信小程序开发者号 . 后面会有如何发布的教程 ...

微信小程序first-child 和 last-child 失效,设置后不起作用~

微信小程序first-child 和 last-child 失效,设置后不起作用~相关推荐

最新文章

热门文章