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