注意,本測試是基於uni-app的古老的非自定義組件模式來的,對於目前最新的自定義組件模式不具有參考意義
本次測試主要參考文檔為w3school CSS 選擇器參考手冊
(主要是安卓/ios/微信小程序的css選擇器兼容)
入坑uniapp/小程序過程中看到dcloud/微信對支持的css選擇器的描述只有六個,
分別是.class,#id,element,element,element,:before,:after
但是看到dcloud給uniapp寫的花裏胡哨的uni的ui庫,
還有各種花裏胡哨的小程序,
並且uniapp還表明支持之前各種無dom的ui庫,
所以我覺得事情並沒有這麼簡單,
趁着元旦放假,抽出一下午時間,
本單身肥宅猿測試了下w3c提供的選擇器,
也當是踩一回uni/小程序的坑吧
具體支持情況見下表(Y表示支持,N表示不支持)
| 選擇器 | css版本 | h5 | 安卓 | ios | 微信小程序 | 備註 |
|---|---|---|---|---|---|---|
.class |
css1 | Y | Y | Y | Y | - |
#id |
css1 | Y | Y | Y | Y | - |
* |
css2 | Y | N | N | N | - |
element |
css1 | Y | Y | Y | Y | 注意類似於html,body這樣的選擇器,
非h5端會被轉成 page |
element,element |
css1 | Y | Y | Y | Y | - |
element>element |
css2 | Y | Y | Y | Y | - |
element+element |
css2 | Y | Y | Y | Y | - |
[attribute] |
css2 | Y | Y | Y | Y | 1.h5端使用uniapp標籤屬性時,
編譯後該屬性可能會消失, 導致該選擇器"失效", 如, view的hover-class屬性
2.微信小程序/app端使用非規範 的屬性,如, <view qwe-rt="asd"></view>
在編譯到微信小程序/app時會消失 同樣導致該選擇器"失效" |
[attribute=value] |
css2 | Y | Y | Y | Y | 同[attribute] |
[attribute~=value] |
css2 | Y | Y | Y | Y | 同[attribute] |
[attribute|=value] |
css2 | Y | Y | Y | Y | 同[attribute] |
:link |
css1 | Y | - | - | - | 沒有找到辦法在非h5上
生成a標籤 |
:visited |
css1 | Y | - | - | - | 沒有找到辦法在非h5上
生成a標籤 |
:active |
css1 | Y | Y | Y | Y | 在非h5的其他三端上表現
與 <view hover-class="xxx">屬性一致
(只測試了view標籤與text標籤) |
:hover |
css1 | Y | Y | Y | Y | 表現基本同:active
但是要取消該狀態 是要點擊其他標籤 (讓hover轉移到其他標籤上) |
:focus |
css2 | N | N | N | N | 1.h5中會把<input />編譯成一個
uni-input>div>input+div.input-placeholder的結構,
在css代碼中寫的類似於 input:focus{background: #F00;}的樣式,
基本上是設置在 uni-input這個標籤上的,
所以期望input的focus樣式並不會出現 (所以h5是因為uni-app對 css代碼的編譯邏輯 導致不支持input的:focus選擇器) 2.類似於 button這些本來在正常html標籤中
是能在點擊時獲得focus狀態的 但在uniapp中,h5會編譯成 uni-button標籤,
這些標籤沒發現它能在點擊後獲得focus狀態 3.其他三端雖然沒像如上描述那樣轉, (直接轉成一個 input._input,button._button)
但是卻不支持focus狀態 不知道是不是官方(dcloud/微信)故意的 |
:first-letter |
css1 | Y | Y | Y | Y | 注意別踩坑 |
:first-line |
css1 | Y | Y | Y | Y | 注意別踩坑 |
:first-child |
css2 | Y | Y | Y | Y | - |
:before |
css2 | Y | Y | Y | Y | - |
:after |
css2 | Y | Y | Y | Y | - |
:lang(language) |
css2 | Y | N | N | N | - |
element1~element2 |
css3 | Y | Y | Y | Y | - |
[attribute^=value] |
css3 | Y | Y | Y | Y | 同[attribute] |
[attribute$=value] |
css3 | Y | Y | Y | Y | 同[attribute] |
[attribute*=value] |
css3 | Y | Y | Y | Y | 同[attribute] |
:first-of-type |
css3 | Y | Y | Y | Y | - |
:last-of-type |
css3 | Y | Y | Y | Y | - |
:only-child |
css3 | Y | Y | Y | Y | - |
:nth-child(n) |
css3 | Y | Y | Y | Y | - |
:nth-last-child(n) |
css3 | Y | Y | Y | Y | - |
:nth-of-type(n) |
css3 | Y | Y | Y | Y | - |
:nth-last-of-type(n) |
css3 | Y | Y | Y | Y | - |
:last-child |
css3 | Y | Y | Y | Y | - |
:root |
css3 | Y | N | N | N | h5端的支持只能是
在app.vue的 style標籤裏寫的
或者 @import的樣式裏才能用:root |
:empty |
css3 | Y | Y | Y | Y | - |
:target |
css3 | Y | - | - | - | 沒有找到辦法在非h5上
實現錨點 |
:enabled |
css3 | N | N | N | N | 類似於:focus,
可使用類似於 button:not([disabled])
的方案代替 |
:disabled |
css3 | N | N | N | N | 類似於:focus,
但是可以使用類似於 button[disabled]
的方案代替 但是隻寫 button[disabled]
權重可能不夠 h5端寫 input[disabled]無效,
原因見 :focus備註
但是非h5端可以寫 input[disabled] |
:checked |
css3 | N | N | N | N | 同:disabled |
:not(selector) |
css3 | Y | Y | Y | Y | - |
::selection |
css3 | Y | Y | N | ios:N
安卓:Y |
- |
至於其他廠商的小程序
我也沒有踩坑經驗
但是可參考微信小程序的兼容
畢竟是微信把小程序推起來之後
其他廠商才開始出小程序
(最開始的時候支付寶小程序抄微信小程序源碼事件還有人記得不)
(好像不弄套自己家的小程序出來,自己就不是大廠了似得)
求求你別更新了,我學不過來了.jpg
手動狗頭.jpg
