小程序文檔上說
目前支持的選擇器有：
| 選擇器 | 樣例 | 樣例描述 |
|---|---|---|
| .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ǔ):
<view class="parent">
<text class="son son-1">大兒子</text>
<text class="son son-2" space>二兒子</text>
<text class="son son-3">三兒子</text>
</view>
<button type="primary">按鈕</button>
"~"選擇器
選擇其后所有同級元素:
.parent text {
display: block;
font-size: 24px;
}
text.son-1 ~ text {
color: #69c;
}
image
"+"選擇器
選擇其后緊鄰?fù)壴?
.parent text {
display: block;
font-size: 24px;
}
text.son-1 + text {
color: #69c;
}
image
xx:nth-child(n)
第n個xx表達(dá)式對應(yīng)的元素
.parent>text {
display: block;
font-size: 24px;
}
.parent>text:nth-child(2) {
color: #f10;
}
image
經(jīng)過測試, 類似的還有 ::last-of-type(n), :nth-last-child(n), :nth-last-of-type(n), :first-of-type 也都好使.
[attribute]
擁有attribute屬性的元素
button[type]{
height: 200px;
}
image
經(jīng)過測試, 類似的還有 :[attribute=value], [attribute~=value], [attribute|=value] 也都好使.
注: 由于微信支持的標(biāo)簽上的屬性和html的并不一致, 有很多html支持的屬性微信是不支持的, 如果不支持的屬性是沒有使用屬性選擇器的.
微信支持的標(biāo)簽
總結(jié)
列一下本文補(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]
我也是剛開始學(xué)習(xí)微信小程序開發(fā)可能還有遺漏, 還請大家包涵以及指正,后續(xù)如有新的發(fā)現(xiàn)我也會補(bǔ)充到本文, 方便大家查閱, 感謝閱讀.
