注意,本测试是基于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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。