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

桃扇骨 2022-01-31 17:34 1033阅读 0赞

# [小程序/uniapp支持的css选择器一览][uniapp_css] #

*  [hibrid-app][]
 *  
 *  [css][]
 *  
 *  [css选择器][css 1]
 *  
 *  [dcloud][]
 *  
 *  [小程序][Link 1]

1.4k 次阅读 · 读完需要 15 分钟

本次测试主要参考文档为[w3school 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表示不支持)

<table> 
 <thead> 
 <tr> 
 <th>选择器</th> 
 <th>css版本</th> 
 <th>h5</th> 
 <th>安卓</th> 
 <th>ios</th> 
 <th>微信小程序</th> 
 <th>备注</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td><code>.class</code></td> 
 <td>css1</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>#id</code></td> 
 <td>css1</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>*</code></td> 
 <td>css2</td> 
 <td>Y</td> 
 <td>N</td> 
 <td>N</td> 
 <td>N</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>element</code></td> 
 <td>css1</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>注意类似于<code>html</code>,<code>body</code>这样的选择器, 非h5端会被转成<code>page</code></td> 
 </tr> 
 <tr> 
 <td><code>element,element</code></td> 
 <td>css1</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>element&gt;element</code></td> 
 <td>css2</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>element+element</code></td> 
 <td>css2</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>[attribute]</code></td> 
 <td>css2</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>1.h5端使用uniapp标签属性时, 编译后该属性可能会消失, 导致该选择器"失效", 如,<code>view</code>的<code>hover-class</code>属性 2.微信小程序/app端使用非规范 的属性,如, <code>&lt;view qwe-rt="asd"&gt;&lt;/view&gt;</code> 在编译到微信小程序/app时会消失 同样导致该选择器"失效"</td> 
 </tr> 
 <tr> 
 <td><code>[attribute=value]</code></td> 
 <td>css2</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>同<code>[attribute]</code></td> 
 </tr> 
 <tr> 
 <td><code>[attribute~=value]</code></td> 
 <td>css2</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>同<code>[attribute]</code></td> 
 </tr> 
 <tr> 
 <td><code>[attribute|=value]</code></td> 
 <td>css2</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>同<code>[attribute]</code></td> 
 </tr> 
 <tr> 
 <td><code>:link</code></td> 
 <td>css1</td> 
 <td>Y</td> 
 <td>-</td> 
 <td>-</td> 
 <td>-</td> 
 <td>没有找到办法在非h5上 生成a标签</td> 
 </tr> 
 <tr> 
 <td><code>:visited</code></td> 
 <td>css1</td> 
 <td>Y</td> 
 <td>-</td> 
 <td>-</td> 
 <td>-</td> 
 <td>没有找到办法在非h5上 生成a标签</td> 
 </tr> 
 <tr> 
 <td><code>:active</code></td> 
 <td>css1</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>在非h5的其他三端上表现 与<code>&lt;view hover-class="xxx"&gt;</code>属性一致 (只测试了view标签与text标签)</td> 
 </tr> 
 <tr> 
 <td><code>:hover</code></td> 
 <td>css1</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>表现基本同<code>:active</code> 但是要取消该状态 是要点击其他标签 (让hover转移到其他标签上)</td> 
 </tr> 
 <tr> 
 <td><code>:focus</code></td> 
 <td>css2</td> 
 <td>N</td> 
 <td>N</td> 
 <td>N</td> 
 <td>N</td> 
 <td>1.h5中会把<code>&lt;input /&gt;</code>编译成一个 <code>uni-input&gt;div&gt;input+div.input-placeholder</code>的结构, 在css代码中写的类似于 <code>input:focus{background: #F00;}</code>的样式, 基本上是设置在<code>uni-input</code>这个标签上的, 所以期望input的focus样式并不会出现 (所以h5是因为uni-app对 css代码的编译逻辑 导致不支持input的:focus选择器) 2.类似于<code>button</code>这些本来在正常html标签中 是能在点击时获得focus状态的 但在uniapp中,h5会编译成<code>uni-button</code>标签, 这些标签没发现它能在点击后获得focus状态 3.其他三端虽然没像如上描述那样转, (直接转成一个<code>input._input</code>,<code>button._button</code>) 但是却不支持focus状态 不知道是不是官方(dcloud/微信)故意的</td> 
 </tr> 
 <tr> 
 <td><code>:first-letter</code></td> 
 <td>css1</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>注意<a href="https://www.zhangxinxu.com/wordpress/2016/09/css-first-letter-pseudo-element/" rel="nofollow">别踩坑</a></td> 
 </tr> 
 <tr> 
 <td><code>:first-line</code></td> 
 <td>css1</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>注意<a href="https://www.zhangxinxu.com/wordpress/2013/07/first-line%E4%BC%AA%E7%B1%BB-%E5%85%BC%E5%AE%B9-ie6-ie7-%E5%A4%9A%E8%83%8C%E6%99%AF-multiple-backgrounds/" rel="nofollow">别踩坑</a></td> 
 </tr> 
 <tr> 
 <td><code>:first-child</code></td> 
 <td>css2</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>:before</code></td> 
 <td>css2</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>:after</code></td> 
 <td>css2</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>:lang(language)</code></td> 
 <td>css2</td> 
 <td>Y</td> 
 <td>N</td> 
 <td>N</td> 
 <td>N</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>element1~element2</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>[attribute^=value]</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>同<code>[attribute]</code></td> 
 </tr> 
 <tr> 
 <td><code>[attribute$=value]</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>同<code>[attribute]</code></td> 
 </tr> 
 <tr> 
 <td><code>[attribute*=value]</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>同<code>[attribute]</code></td> 
 </tr> 
 <tr> 
 <td><code>:first-of-type</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>:last-of-type</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>:only-child</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>:nth-child(n)</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>:nth-last-child(n)</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>:nth-of-type(n)</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>:nth-last-of-type(n)</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>:last-child</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>:root</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>N</td> 
 <td>N</td> 
 <td>N</td> 
 <td>h5端的支持只能是 在app.vue的<code>style</code>标签里写的 或者<code>@import</code>的样式里才能用<code>:root</code></td> 
 </tr> 
 <tr> 
 <td><code>:empty</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>:target</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>-</td> 
 <td>-</td> 
 <td>-</td> 
 <td>没有找到办法在非h5上 实现锚点</td> 
 </tr> 
 <tr> 
 <td><code>:enabled</code></td> 
 <td>css3</td> 
 <td>N</td> 
 <td>N</td> 
 <td>N</td> 
 <td>N</td> 
 <td>类似于<code>:focus</code>, 可使用类似于 <code>button:not([disabled])</code> 的方案代替</td> 
 </tr> 
 <tr> 
 <td><code>:disabled</code></td> 
 <td>css3</td> 
 <td>N</td> 
 <td>N</td> 
 <td>N</td> 
 <td>N</td> 
 <td>类似于<code>:focus</code>, 但是可以使用类似于 <code>button[disabled]</code> 的方案代替 但是只写<code>button[disabled]</code> 权重可能不够 h5端写<code>input[disabled]</code>无效, 原因见<code>:focus</code>备注 但是非h5端可以写<code>input[disabled]</code></td> 
 </tr> 
 <tr> 
 <td><code>:checked</code></td> 
 <td>css3</td> 
 <td>N</td> 
 <td>N</td> 
 <td>N</td> 
 <td>N</td> 
 <td>同<code>:disabled</code></td> 
 </tr> 
 <tr> 
 <td><code>:not(selector)</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>-</td> 
 </tr> 
 <tr> 
 <td><code>::selection</code></td> 
 <td>css3</td> 
 <td>Y</td> 
 <td>Y</td> 
 <td>N</td> 
 <td>ios:N 安卓:Y</td> 
 <td>-</td> 
 </tr> 
 </tbody> 
</table>

--------------------

至于其他厂商的小程序  
我也没有踩坑经验  
但是可参考微信小程序的兼容  
毕竟是微信把小程序推起来之后  
其他厂商才开始出小程序  
(最开始的时候支付宝小程序抄微信小程序源码事件还有人记得不)

--------------------

> (好像不弄套自己家的小程序出来,自己就不是大厂了似得)

[uniapp_css]: https://segmentfault.com/a/1190000017582162
[hibrid-app]: https://segmentfault.com/t/hibrid-app/blogs
[css]: https://segmentfault.com/t/css/blogs
[css 1]: https://segmentfault.com/t/css%E9%80%89%E6%8B%A9%E5%99%A8/blogs
[dcloud]: https://segmentfault.com/t/dcloud/blogs
[Link 1]: https://segmentfault.com/t/%E5%B0%8F%E7%A8%8B%E5%BA%8F/blogs
[w3school CSS]: http://www.w3school.com.cn/cssref/css_selectors.asp