微信小程序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 選擇器