小程序/uniapp支持的css選擇器一覽

時間 2019-11-09

標籤程序 uniapp 支持 css 選擇器一覽欄目 CSS 简体版

原文原文鏈接

本次測試主要參考文檔爲w3school CSS 選擇器參考手冊

(主要是安卓/ios/微信小程序的css選擇器兼容)

入坑uniapp/小程序過程當中看到dcloud/微信對支持的css選擇器的描述只有六個,
分別是.class,#id,element,element,element,:before,:after
可是看到dcloud給uniapp寫的花裏胡哨的uni的ui庫,
還有各類花裏胡哨的小程序,
而且uniapp還代表支持以前各類無dom的ui庫,
因此我以爲事情並無這麼簡單,
趁着元旦放假,抽出一下午時間,
本單身肥宅猿測試了下w3c提供的選擇器,
也當是踩一回uni/小程序的坑吧css

具體支持狀況見下表(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	-