微信小程序偽類(lèi)選擇器的使用詳解
一.偽類(lèi)選擇器
結(jié)構(gòu)偽類(lèi)常見(jiàn)書(shū)寫(xiě)方式：
第一類(lèi)：找第幾個(gè)孩子
1. :first-child 找第一個(gè)孩子
2. :last-child 找最后一個(gè)孩子
3. :nth-child()，正著找
數(shù)字：寫(xiě)數(shù)字幾就是找第幾個(gè)孩子，
2n或者even:找偶數(shù)
2n+1或者odd:找奇數(shù)
4. :nth-last-child(),倒著找
數(shù)字：寫(xiě)數(shù)字幾就是找倒數(shù)第幾個(gè)孩子。
第二類(lèi)： 從限定的類(lèi)型中找第幾個(gè)
1. :fist-of-type,從同類(lèi)型中找出第一個(gè)孩子
2. :last-of-type,從同類(lèi)型中找出最后一個(gè)孩子
3. :nth-of-type(數(shù)字),從同類(lèi)型中找出第幾個(gè)個(gè)孩子
微信小程序中使用
在wxml中寫(xiě)一個(gè)列表渲染
<view wx:for="{{numList}}" wx:key="*this">{{item}}</view>使用偽類(lèi)選擇器
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;
}實(shí)現(xiàn)效果：
到此這篇關(guān)于微信小程序偽類(lèi)選擇器的文章就介紹到這了,更多相關(guān)微信小程序偽類(lèi)選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
原生js實(shí)現(xiàn)購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)購(gòu)物車(chē)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
bootstrap的3級(jí)菜單樣式,支持母版頁(yè)保留打開(kāi)狀態(tài)實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇bootstrap的3級(jí)菜單樣式,支持母版頁(yè)保留打開(kāi)狀態(tài)實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
JavaScript實(shí)現(xiàn)的聯(lián)動(dòng)菜單特效示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的聯(lián)動(dòng)菜單特效,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-07-07
JS去掉第一個(gè)字符和最后一個(gè)字符的實(shí)現(xiàn)代碼
本篇文章主要是對(duì)JS去掉第一個(gè)字符和最后一個(gè)字符的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
BootStrap Typeahead自動(dòng)補(bǔ)全插件實(shí)例代碼
本文給大家介紹BootStrap Typeahead自動(dòng)補(bǔ)全插件的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2016-08-08
JavaScript實(shí)現(xiàn)數(shù)據(jù)可視化圖表的示例代碼
這篇文章主要介紹了如何使用JavaScript創(chuàng)建實(shí)時(shí)數(shù)據(jù)可視化圖表,我們將使用流行的圖表庫(kù),如Chart.js,來(lái)展示如何將實(shí)時(shí)數(shù)據(jù)動(dòng)態(tài)呈現(xiàn)在圖表中,感興趣的可以了解下2024-01-01
防止按鈕在短時(shí)間內(nèi)被多次點(diǎn)擊的方法
一個(gè)按鈕可以在短時(shí)間內(nèi)多次點(diǎn)擊，那么有可能會(huì)被用戶(hù)惡意點(diǎn)擊，下面有個(gè)不錯(cuò)的方法可以有效制止，希望對(duì)大家有所幫助2014-03-03
這篇文章主要介紹了javascript內(nèi)置對(duì)象操作詳解,需要的朋友可以參考下2015-02-02
基于Cesium實(shí)現(xiàn)拖拽3D模型的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Cesium實(shí)現(xiàn)在地圖上添加一個(gè)3D模型，并且可以實(shí)現(xiàn)拖拽效果。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-06-06
JavaScript合并兩個(gè)數(shù)組并去除重復(fù)項(xiàng)的方法
這篇文章主要介紹了JavaScript合并兩個(gè)數(shù)組并去除重復(fù)項(xiàng)的方法,涉及javascript操作數(shù)組的合并與去重的相關(guān)技巧,需要的朋友可以參考下2015-06-06