摘要：本次测试主要参考文档为选择器参考手册主要是安卓微信小程序的选择器兼容入坑小程序过程中看到微信对支持的选择器的描述只有六个分别是但是看到给写的花里胡哨的的库还有各种花里胡哨的小程序并且还表明支持之前各种无的库所以我觉得事情并没有这么简单趁着元
本次测试主要参考文档为w3school CSS 选择器参考手册 (主要是安卓/ios/微信小程序的css选择器兼容)
入坑uniapp/小程序过程中看到dcloud/微信对支持的css选择器的描述只有六个,
分别是.class,#id,element,element,element,:before,:after
但是看到dcloud给uniapp写的花里胡哨的uni的ui库,
还有各种花里胡哨的小程序,
并且uniapp还表明支持之前各种无dom的ui库,
所以我觉得事情并没有这么简单,
趁着元旦放假,抽出一下午时间,
本单身肥宅猿测试了下w3c提供的选择器,
也当是踩一回uni/小程序的坑吧
| 选择器 | 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端使用非规范 的属性,如, 在编译到微信小程序/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标签与text标签) |
| :hover | css1 | Y | Y | Y | Y | 表现基本同:active 但是要取消该状态 是要点击其他标签 (让hover转移到其他标签上) |
| :focus | css2 | N | N | N | N | 1.h5中会把编译成一个 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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117154.html
摘要：官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署，在微信开发工具中直接上传代码就行。 为什么 学习 Java 三年，目前已经工作了2年，因为自学，基础差，所以打算年末总结一下常见的基础知识和面试点； 也可以通过独立做一个项目整合自己工作期间学习的知识，加深印象。 但是想着回家或是平时手机用的多，做一款APP和小程序很方便查看。 项目展示 本...
摘要：的基础要方便使，最好先下个，这个是官方推荐的，很多东西都集成界面化操作的先从网上拿个开源项目做示范吧地址下载好后配置安装命令安装依赖这个项目其实已经集成了很多东西了就可以看 ...
摘要：最近在捣鼓项目，恰好用到组件，之前写了个，后面一直都想写一个像样的，可以分享给别人用的组件。自己的水平一般，开发出来的组件可能代码不咋地，还望路过大神斧正。 uniapp是2019年非常的火爆的一个Dcloud开发跨平台前端工具，支持ios android wap，小程序，除了android有点卡外，其他暂时没有发现什么瑕疵。 最近在捣鼓uniapp项目，恰好用到table组件，之前...
在微信小程序开发中用新功能利用uni-app来开发，我们看看都有哪些优缺？ 首选我们看看官网给出的解决思路方案 https://uniapp.dcloud.io/hybrid 方式1：把原生小程序转换为uni-app源码。有各种转换工具，详见 方式2：新建一个uni-app项目，把原生小程序的代码变成小程序组件，进而整合到uni-app项目下。uni-app支持使用小程序wxml组件，...
摘要：基于跨端开发短视频直播聊天实例。全新研发的一款多端仿制抖音短视频直播聊天项目，基于等技术开发而成。播放进度变化时触发小视频支持播放暂停，上下滑动切换效果。 uni-...
阅读 4694·2021-09-07 09:58
阅读 582·2019-08-30 15:55
阅读 2532·2019-08-30 15:55
阅读 787·2019-08-30 15:53
阅读 1428·2019-08-29 12:57
阅读 2775·2019-08-27 11:03
阅读 1601·2019-08-26 13:46
阅读 448·2019-08-26 11:00
