微信小程序文檔沒寫支持, 但是實際支持的選擇器有哪些?

qpwoeiru96 發布于2019-08-30 15:44 / 2649人閱讀

摘要：小程序文檔上說目前支持的選擇器有選擇器樣例樣例描述選擇所有擁有的組件選擇擁有的組件選擇所有組件選擇所有文檔的組件和所有的組件在組件后邊插入內容在組件前邊插入內容在實踐中我發現除了文檔上說的幾種選擇器經過測試發現其實還有幾種支持的選擇器沒有列

小程序文檔上說

目前支持的選擇器有：

選擇器	樣例	樣例描述
.class	.intro	選擇所有擁有 class="intro" 的組件
#id	#firstname	選擇擁有 id="firstname" 的組件
element	view	選擇所有 view 組件
element, element	view, checkbox	選擇所有文檔的 view 組件和所有的 checkbox 組件
::after	view::after	在 view 組件后邊插入內容
::before	view::before	在 view 組件前邊插入內容

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

還支持哪些選擇器?

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


    大兒子
    二兒子
    三兒子

"~"選擇器

選擇其后所有同級元素:

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

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

云服務器 GPU云服務器微信小程序支持的js 微信小程序支持webrtc 微信小程序不支持webrtc 微信小程序是否支持webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116263.html

微信小程序文檔沒寫支持, 但是實際支持的選擇器有哪些?

摘要：小程序文檔上說目前支持的選擇器有選擇器樣例樣例描述選擇所有擁有的組件選擇擁有的組件選擇所有組件選擇所有文檔的組件和所有的組件在組件后邊插入內容在組件前邊插入內容在實踐中我發現除了文檔上說的幾種選擇器經過測試發現其實還有幾種支持的選擇器沒有列小程序文檔上說目前支持的選擇器有：選擇器樣例樣例描述 .class .intro 選擇所有擁有 class=intro 的組件 ...

miguel.jiang 2019-08-26 10:48 評論0 收藏0
微信小程序調研文檔

摘要：關于微信小程序之前只是聽說，并沒有引起我太大的興趣。剛好團隊內部有個需求需要微信小程序。暫時沒有上線經歷，沒辦法給出這個時間微信小程序的代碼包大小當前限制是。關于微信小程序之前只是聽說，并沒有引起我太大的興趣。周一被小程序刷屏，然后就順手搜索了解了一下。發現小程序已經火遍了整個程序員圈子。剛好團隊內部有個需求需要微信小程序。就緊急對微信小程序進行了調研，閱讀過開發者文檔后總結了以下的...

kidsamong 2019-08-20 13:44 評論0 收藏0
從零開始：微信小程序新手入門寶典《一》

摘要：為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習一微信小程序的特點張小龍張小龍全面闡述小程序，推薦通讀此文小程序是一種不需要下載安裝即可使用的應用，它出現了觸手可及的夢想，用戶掃一掃或者搜一下即為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習；一：微信小程序的特點張小龍：張小龍全面闡述小程...

whataa 2019-07-25 11:18 評論0 收藏0
從零開始：微信小程序新手入門寶典《一》

摘要：為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習一微信小程序的特點張小龍張小龍全面闡述小程序，推薦通讀此文小程序是一種不需要下載安裝即可使用的應用，它出現了觸手可及的夢想，用戶掃一掃或者搜一下即為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習；一：微信小程序的特點張小龍：張小龍全面闡述小程...

mdluo 2019-08-21 15:02 評論0 收藏0