uniapp样式选择器最全详解

转自 duanshuilu.com

具体支持情况见下表(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	-

uniapp样式选择器最全详解相关推荐

html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
Linux-shell-完全详解
Linux-shell-完全详解(1) 一. Shell简介:什么是Shell,Shell命令的两种执行方式1 二. 几种常见的Shell1 三. Shell脚本语言与编译型语言的差异2 四.什么时候 ...
WEB前端之网页设计③----最新最全详解/如何在网页上创建表格
WEB前端之网页设计③--最新最全详解/如何在网页上创建表格一.表格效果图1: <table border="0px" cellspacing="1px" ...
前端：深拷贝的多种方法（超全详解）
别划走 !走过路过不要错过:错过这个村,我在下一个村等你!坚持每天进步一点点:一天两天可能没发现有效果:但一年365天后你将会感谢今天的自己!!! 今天博主带大家了解一下前端常用的深拷贝方法:(超全详 ...
【学习笔记】薛定谔的喵咪Cat—球盒问题（全详解）
[学习笔记]薛定谔的喵咪Cat-球盒问题(全详解) 传送门:薛定谔的喵咪 $Luogu-U77460$(自自上传的题目,数据略水,尤其是 $opt=9$ ,以后找时间补上) [题目描述] 当一 ...
人工智能里程碑ChatGPT之最全详解图解
人工智能里程碑ChatGPT之最全详解图解 1. ChatGPT的前世今生 1.1 ChatGPT演化路线 1.2技术推进路线 2.ChatGPT主要功能及应用领域 2.1 主要功能 2.2 应用领域 ...
MySQL语句最全详解
文章目录 MySQL语句最全详解一.常见sql语句用法与演示前置条件连接命令 1.常用数据库类型 2.数据约束(数据表中) 3.数据库的备份和还原二.操作数据库(操作数据库之前要通过命令行工具 ...
JVM常量池最全详解-常量池/运行时常量池/字符串常量池/基本类型常量池，看这一篇就够了
JVM常量池最全详解-常量池/运行时常量池/字符串常量池/基本类型常量池,看这一篇就够了! 常量池详解 1. 字面量和符号引用 1.1 字面量 1.2 符号引用 2. 常量池vs运行时常量池 3. 常 ...
【MyBatis】MyBatis 二级缓存全详解
1.概述转载:MyBatis 二级缓存全详解上一篇文章中我们介绍到了 MyBatis 一级缓存其实就是 SqlSession 级别的缓存,什么是 SqlSession 级别的缓存呢?一级缓存的本质 ...

uniapp样式选择器最全详解

uniapp样式选择器最全详解相关推荐

最新文章

热门文章