微信小程序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>
//这样就可以完美找到最后一个元素~
欢迎留言交流~