微信小程序first-child 和 last-child 失效如何解决？

问题情况

html

 1 <view class="box">
 2   <view class="floor">
 3     一楼
 4   </view>
 5   <view class="floor">
 6     二楼
 7   </view>
 8   <view class="floor">
 9     三楼
10   </view>
11   <view class="floor">
12     四楼
13   </view>
14 </view>

css

1 .floor:last-child{
2     color: blue;
3 }

这种写法在微信小程序是无法生效的

解决办法：

html

 1 <view class="box">
 2      <view>
 3           <view class="floor">
 4             一楼
 5           </view>
 6           <view class="floor">
 7             二楼
 8           </view>
 9           <view class="floor">
10             三楼
11           </view>
12           <view class="floor">
13             四楼
14           </view>
15        </view>
16 </view>

在楼层这一部分的外部再包裹一层，就可以执行了

 

posted @ 2020-10-22 14:14  俩只猫  阅读(2524)  评论(0)  编辑  收藏  举报