小程序-uniapp支持的css选择器列表

注意，本次测试基于uni-app旧的非自定义组件模式，对最新的自定义组件模式没有参考意义。本次测试主要参考文档是w3schoolCSS选择器参考手册（主要是Android/兼容ios/微信小程序的css选择器）在入坑uniapp/mini-programs的过程中，可以看到dcloud/WeChat只有supportedcssselectors的六种描述，分别是.class,#id,element,element,element,:before,:after但是我看到了dcloud为uniapp写的花哨的uniui库，还有各种花哨的小程序，还有uniapp还标明支持以前的各种没有dom的ui库，所以我觉得事情不是这么简单的，趁着元旦放假，我花了一个下午测试了一下w3c提供的selector，应该是一步到位了uni/小程序的坑。具体支持见下表（Y表示支持，N表示不支持）selectorcssversionh5Androidios微信小程序备注。classcss1YYYY-#idcss1YYYY-*css2YNNN-elementcss1YYYY注意和html,body等选择器类似，非h5端会转为pageelement，elementcss1YYYY-element>elementcss2YYYY-element+elementcss2YYYY-[attribute]css2YYYY1.h5时使用uniapptag属性，编译后该属性可能会消失，导致选择器“失效”，比如view2的hover-class属性。微信小程序/app端使用了非标准属性，比如编译到微信小程序/app后会消失，也会导致选择器“失效”[attribute=value]css2YYYY同[attribute][attribute~=value]css2YYYY与[attribute][attribute|=value]css2YYYY与[attribute]相同：linkcss1Y---找不到在非h5上生成标签的方法：visitedcss1Y---找不到一种在非h5上生成标签的方法Generateatagonthetop:activecss1YYYYbehavesthesameastheattributeontheother三端非h5（只测试过view标签和文本标签):hovercss1YYYY的行为基本和:active一样但是取消这个状态是点击其他标签(让hover转移到其他标签):focuscss2NNNN1.h5会把编译成uni-input>div>input+div.input-placeholder的结构，用类似input:focus{background:#F00;}的css代码写的，基本设置在uni-input标签上，所以期望inputfocus样式不会出现（h5是因为uni-app编译css代码逻辑，不支持input:focusselector）2.类似buttons，这些在普通html标签中点击时可以获得焦点状态但是在uniapp中，h5会被编译成uni-button标签，没有发现这些标签是点击后能够获取焦点状态的3.其他三个终端虽然没有像上面介绍的那样传输，（直接转换成input._input,button._button）但是不支持焦点状态。不知道是不是官方（dcloud/微信）故意的：first-lettercss1YYYY小心别踩坑：first-linecss1YYYY小心别踩坑：first-childcss2YYYY-:beforecss2YYYY-:之后css2YYYY-:lang(language)css2YNNN-element1~element2css3YYYY-[attribute^=value]css3YYYYsameas[attribute][attribute$=value]css3YYYYsameas[attribute][attribute*=value]css3YYYYsameas[attribute]:first-of-typecss3YYYY-:最后类型css3YYYY-:only-childcss3YYYY-:nth-child(n)css3YYYY-:nth-last-child(n)css3YYYY-:nth-of-type(n)css3YYYY-:nth-last-of-type(n)css3YYYY-:last-childcss3YYYY-:rootcss3YNNNh5只能在应用中支持只能在.vue的style标签或者@import的style中使用：root:emptycss3YYYY-:targetcss3Y---我找不到在non-h5上实现锚点的方法：enabledcss3NNNN类似于：focus，可以用类似于button:not([disabled])代替：disabledcss3NNNN类似于：focus，但是可以用类似于button[disabled]的方案代替，但是只写button[disabled]的权重可能不足以在h5端写入input[disabled]。原因是：focusRemarksbutnon-h5endcanwriteinput[disabled]:checkedcss3NNNN同：disabled:not(selector)css3YYYY-::selectioncss3YYNios:NAndroid:Y-至于其他厂商的小程序，我没有踩坑的经验，不过可以参考微信小程序的兼容性，毕竟是其他厂商在微信推送小程序后才开始发布的。不像大厂）请不要更新，我学不会.jpg手动狗头.jpg