微信小程序偽類選擇器的使用詳解
更新時間：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)文章
大家對form表單的action提交有些了解吧，下面為大家介紹下實現(xiàn)的js部分與html部分，感興趣的朋友可以參考下2014-01-01
本文總結(jié)了我在JavaScript編程中所找到的提高JavaScript運行性能的一些方法，其實這些經(jīng)驗都基于幾條原則2008-11-11
獲取當(dāng)前點擊按鈕的id用this.id實現(xiàn)
這篇文章主要介紹了獲取當(dāng)前點擊按鈕的id的方法，,需要的朋友可以參考下2014-03-03
JavaScript高級程序設(shè)計閱讀筆記（六） ECMAScript中的運算符（二）
ECMAScript中的運算符，學(xué)習(xí)js的朋友可以參考下2012-02-02
關(guān)于iframe之間的通信問題與自適應(yīng)高度問題網(wǎng)上有很多，那么這篇文章小編也和大家一起來談?wù)刬frame之間通信問題及iframe自適應(yīng)高度問題，有需要的可以參考借鑒。2016-08-08
JS中的phototype是JS中比較難理解的一個部分，但下面這篇文章主要給大家介紹了關(guān)于Javascript利用prototype自定義數(shù)組的相關(guān)資料，通過實例給大家介紹phototype的使用，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
typescript在node.js下使用別名(paths)無效的問題詳解
這篇文章主要給大家介紹了關(guān)于typescript在node.js下使用別名(paths)無效問題的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript代理和代理的使用的方法，感興趣的小伙伴們可以參考一下，希望能給你帶來幫助2021-08-08
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了用box固定長寬實現(xiàn)圖片自動輪播效果,需要的朋友可以參考下2014-06-06