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

本文转载自查看原文 2020-10-22 14:14 1150 css/ 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>

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 选择器:first-child与:last-child失效的解决方法伪类 :first-child和last-child CSS选取第几个标签元素：nth-child、first-child、last-child CSS选取第几个标签元素：nth-child、first-child、last-child 让IE7/8使用CSS中first-child和last-child样式属性 CSS 中first-child和last-child不起作用原因设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child) last-child为啥不生效 CSS样式中&和:last-child作用 CSS :first-child 选择器