uniapp樣式選擇器最全詳解

轉自 duanshuilu.com

 

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

---