用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

2006湖人vs太阳季后赛:微信小程序文檔沒寫支持, 但是實際支持的選擇器有哪些?

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-8-16 00:17

小程序文檔上說 目前支持的選擇器有: 在實踐中我發現, 除了文檔上說的幾種選擇器, 經過測試發現其實還有幾種支持的選擇器沒有列舉! 還支持哪些選擇器? 后面講解的例子都以此xml結構為基礎: view class="parent" te ...

湖人vs爵士季后赛文檔上說

目前支持的選擇器有:

在實踐中我發現, 除了文檔上說的幾種選擇器, 經過測試發現其實還有幾種支持的選擇器沒有列舉!

還支持哪些選擇器?

后面講解的例子都以此xml結構為基礎:

<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;
}
復制代碼

"+"選擇器

選擇其后緊鄰同級元素:

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

xx:nth-child(n)

第n個xx表達式對應的元素

.parent>text {
  display: block;
  font-size: 24px;
}
.parent>text:nth-child(2) {
  color: #f10;
}
復制代碼

經過測試, 類似的還有 ::last-of-type(n), :nth-last-child(n), :nth-last-of-type(n), :first-of-type 也都好使.

[attribute]

擁有attribute屬性的元素

button[type]{
    height: 200px;
}
復制代碼

經過測試, 類似的還有 :[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]

我也是剛開始學習微信小程序開發可能還有遺漏, 還請大家包涵以及指正,后續如有新的發現我也會補充到本文, 方便大家查閱, 感謝閱讀.


分享至 : QQ空間
收藏
原作者: 鐵皮飯盒 來自: 掘金