欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序偽類選擇器的使用詳解

 更新時間：2024年06月20日 10:54:58   作者：井眼  
這篇文章主要介紹了微信小程序偽類選擇器的使用詳解,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧

一.偽類選擇器

結構偽類常見書寫方式：

第一類：找第幾個孩子

    1.    :first-child 找第一個孩子
    2.    :last-child 找最后一個孩子
    3.    :nth-child()，正著找
           數(shù)字：寫數(shù)字幾就是找第幾個孩子，
           2n或者even:找偶數(shù)
           2n+1或者odd:找奇數(shù)
    4.    :nth-last-child(),倒著找
           數(shù)字：寫數(shù)字幾就是找倒數(shù)第幾個孩子。

第二類： 從限定的類型中找第幾個

    1.    :fist-of-type,從同類型中找出第一個孩子
    2.    :last-of-type,從同類型中找出最后一個孩子
    3.    :nth-of-type(數(shù)字),從同類型中找出第幾個個孩子

微信小程序中使用

在wxml中寫一個列表渲染

<view wx:for="{{numList}}" wx:key="*this">{{item}}</view>

使用偽類選擇器

view{
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
view:nth-child(odd){ //奇數(shù)
  background-color: lightblue;
}
view:nth-child(even){ //偶數(shù)
  background-color: lightcoral;
}

實現(xiàn)效果：

在這里插入圖片描述

到此這篇關于微信小程序偽類選擇器的文章就介紹到這了,更多相關微信小程序偽類選擇器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論