摘要:小程序文檔上說目前支持的選擇器有選擇器樣例樣例描述選擇所有擁有的組件選擇擁有的組件選擇所有組件選擇所有文檔的組件和所有的組件在組件后邊插入內(nèi)容在組件前邊插入內(nèi)容在實踐中我發(fā)現(xiàn)除了文檔上說的幾種選擇器經(jīng)過測試發(fā)現(xiàn)其實還有幾種支持的選擇器沒有列
小程序文檔上說
目前支持的選擇器有:
選擇器 | 樣例 | 樣例描述 |
---|---|---|
.class | .intro | 選擇所有擁有 class="intro" 的組件 |
#id | #firstname | 選擇擁有 id="firstname" 的組件 |
element | view | 選擇所有 view 組件 |
element, element | view, checkbox | 選擇所有文檔的 view 組件和所有的 checkbox 組件 |
::after | view::after | 在 view 組件后邊插入內(nèi)容 |
::before | view::before | 在 view 組件前邊插入內(nèi)容 |
在實踐中我發(fā)現(xiàn), 除了文檔上說的幾種選擇器, 經(jīng)過測試發(fā)現(xiàn)其實還有幾種支持的選擇器沒有列舉!
還支持哪些選擇器?后面講解的例子都以此xml結(jié)構(gòu)為基礎(chǔ):
"~"選擇器大兒子 二兒子 三兒子
選擇其后所有同級元素:
.parent text { display: block; font-size: 24px; } text.son-1 ~ text { color: #69c; }"+"選擇器
選擇其后緊鄰?fù)壴?
.parent text { display: block; font-size: 24px; } text.son-1 + text { color: #69c; }xx:nth-child(n)
第n個xx表達式對應(yīng)的元素
.parent>text { display: block; font-size: 24px; } .parent>text:nth-child(2) { color: #f10; }
經(jīng)過測試, 類似的還有 ::last-of-type(n), :nth-last-child(n), :nth-last-of-type(n), :first-of-type 也都好使.
[attribute]擁有attribute屬性的元素
button[type]{ height: 200px; }
經(jīng)過測試, 類似的還有 :[attribute=value], [attribute~=value], [attribute|=value] 也都好使.
注: 由于微信支持的標簽上的屬性和html的并不一致, 有很多html支持的屬性微信是不支持的, 如果不支持的屬性是沒有使用屬性選擇器的.
微信支持的標簽
列一下本文補充的選擇器:
:nth-child(n)
:last-of-type(n)
:nth-last-child(n)
:nth-last-of-type(n)
:first-of-type
[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
我也是剛開始學(xué)習(xí)微信小程序開發(fā)可能還有遺漏, 還請大家包涵以及指正,后續(xù)如有新的發(fā)現(xiàn)我也會補充到本文, 方便大家查閱, 感謝閱讀.
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/106796.html
摘要:小程序文檔上說目前支持的選擇器有選擇器樣例樣例描述選擇所有擁有的組件選擇擁有的組件選擇所有組件選擇所有文檔的組件和所有的組件在組件后邊插入內(nèi)容在組件前邊插入內(nèi)容在實踐中我發(fā)現(xiàn)除了文檔上說的幾種選擇器經(jīng)過測試發(fā)現(xiàn)其實還有幾種支持的選擇器沒有列 小程序文檔上說 目前支持的選擇器有: 選擇器 樣例 樣例描述 .class .intro 選擇所有擁有 class=intro 的組件 ...
摘要:關(guān)于微信小程序之前只是聽說,并沒有引起我太大的興趣。剛好團隊內(nèi)部有個需求需要微信小程序。暫時沒有上線經(jīng)歷,沒辦法給出這個時間微信小程序的代碼包大小當(dāng)前限制是。 關(guān)于微信小程序之前只是聽說,并沒有引起我太大的興趣。周一被小程序刷屏,然后就順手搜索了解了一下。發(fā)現(xiàn)小程序已經(jīng)火遍了整個程序員圈子。剛好團隊內(nèi)部有個需求需要微信小程序。就緊急對微信小程序進行了調(diào)研,閱讀過開發(fā)者文檔后總結(jié)了以下的...
摘要:為了方便大家了解并入門微信小程序,我將一些可能會需要的知識,列在這里,讓大家方便的從零開始學(xué)習(xí)一微信小程序的特點張小龍張小龍全面闡述小程序,推薦通讀此文小程序是一種不需要下載安裝即可使用的應(yīng)用,它出現(xiàn)了觸手可及的夢想,用戶掃一掃或者搜一下即 為了方便大家了解并入門微信小程序,我將一些可能會需要的知識,列在這里,讓大家方便的從零開始學(xué)習(xí); 一:微信小程序的特點 張小龍:張小龍全面闡述小程...
摘要:為了方便大家了解并入門微信小程序,我將一些可能會需要的知識,列在這里,讓大家方便的從零開始學(xué)習(xí)一微信小程序的特點張小龍張小龍全面闡述小程序,推薦通讀此文小程序是一種不需要下載安裝即可使用的應(yīng)用,它出現(xiàn)了觸手可及的夢想,用戶掃一掃或者搜一下即 為了方便大家了解并入門微信小程序,我將一些可能會需要的知識,列在這里,讓大家方便的從零開始學(xué)習(xí); 一:微信小程序的特點 張小龍:張小龍全面闡述小程...
閱讀 533·2024-11-06 13:38
閱讀 832·2024-09-10 13:19
閱讀 971·2024-08-22 19:45
閱讀 1392·2021-11-19 09:40
閱讀 2636·2021-11-18 13:14
閱讀 4300·2021-10-09 10:02
閱讀 2326·2021-08-21 14:12
閱讀 1291·2019-08-30 15:54