欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

小程序/uniapp支持的css选择器一览

发表日期:2019-10 文章编辑:小灯 浏览次数:1999

本次测试主要参考文档为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标签属性时,
编译后该属性可能会消失,
导致该选择器"失效",
如,viewhover-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

本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://www.dengtar.com/23955.html
相关小程序
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.