本次测试主要参考文档为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
发表回复