微信小程序偽類選擇器的使用詳解
更新時間：2024年06月20日 10:54:58 作者：井眼
這篇文章主要介紹了微信小程序偽類選擇器的使用詳解,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
一.偽類選擇器
結(jié)構(gòu)偽類常見書寫方式：
第一類：找第幾個孩子
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)效果：
到此這篇關(guān)于微信小程序偽類選擇器的文章就介紹到這了,更多相關(guān)微信小程序偽類選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
bootstrap的3級菜單樣式,支持母版頁保留打開狀態(tài)實現(xiàn)方法
下面小編就為大家?guī)硪黄猙ootstrap的3級菜單樣式,支持母版頁保留打開狀態(tài)實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JavaScript實現(xiàn)的聯(lián)動菜單特效示例
這篇文章主要介紹了JavaScript實現(xiàn)的聯(lián)動菜單特效,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-07-07
本篇文章主要是對JS去掉第一個字符和最后一個字符的實現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
本文給大家介紹BootStrap Typeahead自動補全插件的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下2016-08-08
JavaScript實現(xiàn)數(shù)據(jù)可視化圖表的示例代碼
這篇文章主要介紹了如何使用JavaScript創(chuàng)建實時數(shù)據(jù)可視化圖表,我們將使用流行的圖表庫,如Chart.js,來展示如何將實時數(shù)據(jù)動態(tài)呈現(xiàn)在圖表中,感興趣的可以了解下2024-01-01
一個按鈕可以在短時間內(nèi)多次點擊，那么有可能會被用戶惡意點擊，下面有個不錯的方法可以有效制止，希望對大家有所幫助2014-03-03
這篇文章主要介紹了javascript內(nèi)置對象操作詳解,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了如何利用Cesium實現(xiàn)在地圖上添加一個3D模型，并且可以實現(xiàn)拖拽效果。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-06-06
JavaScript合并兩個數(shù)組并去除重復(fù)項的方法
這篇文章主要介紹了JavaScript合并兩個數(shù)組并去除重復(fù)項的方法,涉及javascript操作數(shù)組的合并與去重的相關(guān)技巧,需要的朋友可以參考下2015-06-06