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

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