摘要:小程序文档上说目前支持的选择器有选择器样例样例描述选择所有拥有的组件选择拥有的组件选择所有组件选择所有文档的组件和所有的组件在组件后边插入内容在组件前边插入内容在实践中我发现除了文档上说的几种选择器经过测试发现其实还有几种支持的选择器没有列
小程序文档上说
目前支持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro | 选择所有拥有 class="intro" 的组件 |
#id | #firstname | 选择拥有 id="firstname" 的组件 |
element | view | 选择所有 view 组件 |
element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after | 在 view 组件后边插入内容 |
::before | view::before | 在 view 组件前边插入内容 |
在实践中我发现, 除了文档上说的几种选择器, 经过测试发现其实还有几种支持的选择器没有列举!
还支持哪些选择器?后面讲解的例子都以此xml结构为基础:
"~"选择器大儿子 二儿子 三儿子
选择其后所有同级元素:
.parent text { display: block; font-size: 24px; } text.son-1 ~ text { color: #69c; }"+"选择器
选择其后紧邻同级元素:
.parent text { display: block; font-size: 24px; } text.son-1 + text { color: #69c; }xx:nth-child(n)
第n个xx表达式对应的元素
.parent>text { display: block; font-size: 24px; } .parent>text:nth-child(2) { color: #f10; }
经过测试, 类似的还有 ::last-of-type(n), :nth-last-child(n), :nth-last-of-type(n), :first-of-type 也都好使.
[attribute]拥有attribute属性的元素
button[type]{ height: 200px; }
经过测试, 类似的还有 :[attribute=value], [attribute~=value], [attribute|=value] 也都好使.
注: 由于微信支持的标签上的属性和html的并不一致, 有很多html支持的属性微信是不支持的, 如果不支持的属性是没有使用属性选择器的.
微信支持的标签
列一下本文补充的选择器:
:nth-child(n)
:last-of-type(n)
:nth-last-child(n)
:nth-last-of-type(n)
:first-of-type
[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
我也是刚开始学习微信小程序开发可能还有遗漏, 还请大家包涵以及指正,后续如有新的发现我也会补充到本文, 方便大家查阅, 感谢阅读.
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106796.html
摘要:小程序文档上说目前支持的选择器有选择器样例样例描述选择所有拥有的组件选择拥有的组件选择所有组件选择所有文档的组件和所有的组件在组件后边插入内容在组件前边插入内容在实践中我发现除了文档上说的几种选择器经过测试发现其实还有几种支持的选择器没有列 小程序文档上说 目前支持的选择器有: 选择器 样例 样例描述 .class .intro 选择所有拥有 class=intro 的组件 ...
摘要:为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习一微信小程序的特点张小龙张小龙全面阐述小程序,推荐通读此文小程序是一种不需要下载安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习; 一:微信小程序的特点 张小龙:张小龙全面阐述小程...
摘要:为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习一微信小程序的特点张小龙张小龙全面阐述小程序,推荐通读此文小程序是一种不需要下载安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习; 一:微信小程序的特点 张小龙:张小龙全面阐述小程...
阅读 444·2024-09-10 13:19
阅读 637·2024-08-22 19:45
阅读 1287·2021-11-19 09:40
阅读 2392·2021-11-18 13:14
阅读 4198·2021-10-09 10:02
阅读 2183·2021-08-21 14:12
阅读 1211·2019-08-30 15:54
阅读 1408·2019-08-30 15:53