微信小程序文檔沒(méi)寫支持, 但是實(shí)際支持的選擇器有哪些?

小程序文檔上說(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ǔ):

<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>

"~"選擇器

選擇其后所有同級(jí)元素:

.parent text {
  display: block;
  font-size: 24px;
}
text.son-1 ~ text {
  color: #69c;
}
image

"+"選擇器

選擇其后緊鄰?fù)?jí)元素:

.parent text {
  display: block;
  font-size: 24px;
}
text.son-1 + text {
  color: #69c;
}
image

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;
}
image

經(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;
}
image

經(jīng)過(guò)測(cè)試, 類似的還有 :[attribute=value], [attribute~=value], [attribute|=value] 也都好使.

注: 由于微信支持的標(biāo)簽上的屬性和html的并不一致, 有很多html支持的屬性微信是不支持的, 如果不支持的屬性是沒(méi)有使用屬性選擇器的.
微信支持的標(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ā)可能還有遺漏, 還請(qǐng)大家包涵以及指正,后續(xù)如有新的發(fā)現(xiàn)我也會(huì)補(bǔ)充到本文, 方便大家查閱, 感謝閱讀.

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 一、基本選擇器 回顧選擇器 通配符選擇器、元素選擇器、類選擇器、ID選擇器、后代選擇器 新增基本選擇器 子元素選擇...
    越IT閱讀 1,186評(píng)論 0 3
  • 1.class 和 id 的使用場(chǎng)景? 類選擇器允許以一種獨(dú)立于文檔元素的方式來(lái)指定樣式。該選擇器可以單獨(dú)使用,也...
    草鞋弟閱讀 2,453評(píng)論 0 1
  • 寫給正在學(xué)習(xí)選擇器的小伙伴們! 不懂的可以加我聯(lián)系方式,一起討論!QQ:951434130序選擇器很重要,學(xué)習(xí)時(shí)記...
    依風(fēng)伴雨閱讀 1,120評(píng)論 1 3
  • 1.class 和 id 的使用場(chǎng)景? 兩者都能選取DOM節(jié)點(diǎn)并給DOM節(jié)點(diǎn)添加樣式,但是W3C標(biāo)準(zhǔn)里規(guī)定頁(yè)面中只...
    饑人谷_米彌輪閱讀 416評(píng)論 0 1
  • 一,CSS3 選擇器分類 二,選擇器語(yǔ)法 1,基本選擇器語(yǔ)法 選擇器 類型 功能描述 * 通配選擇器 選擇文檔中所...
    newSpring666閱讀 317評(píng)論 0 0