微信小程序文档没写支持, 但是实际支持的选择器有哪些?

qpwoeiru96 发布于2019-08-30 15:44 / 2530人阅读

摘要：小程序文档上说目前支持的选择器有选择器样例样例描述选择所有拥有的组件选择拥有的组件选择所有组件选择所有文档的组件和所有的组件在组件后边插入内容在组件前边插入内容在实践中我发现除了文档上说的几种选择器经过测试发现其实还有几种支持的选择器没有列

小程序文档上说

目前支持的选择器有：

选择器	样例	样例描述
.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]

我也是刚开始学习微信小程序开发可能还有遗漏, 还请大家包涵以及指正,后续如有新的发现我也会补充到本文, 方便大家查阅, 感谢阅读.

混合云专线服务微信小程序支持的js 微信小程序支持webrtc 微信小程序不支持webrtc 微信小程序是否支持webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116263.html

微信小程序文档没写支持, 但是实际支持的选择器有哪些?

摘要：小程序文档上说目前支持的选择器有选择器样例样例描述选择所有拥有的组件选择拥有的组件选择所有组件选择所有文档的组件和所有的组件在组件后边插入内容在组件前边插入内容在实践中我发现除了文档上说的几种选择器经过测试发现其实还有几种支持的选择器没有列小程序文档上说目前支持的选择器有：选择器样例样例描述 .class .intro 选择所有拥有 class=intro 的组件 ...

miguel.jiang 2019-08-26 10:48 评论0 收藏0
微信小程序调研文档

摘要：关于微信小程序之前只是听说，并没有引起我太大的兴趣。刚好团队内部有个需求需要微信小程序。暂时没有上线经历，没办法给出这个时间微信小程序的代码包大小当前限制是。关于微信小程序之前只是听说，并没有引起我太大的兴趣。周一被小程序刷屏，然后就顺手搜索了解了一下。发现小程序已经火遍了整个程序员圈子。刚好团队内部有个需求需要微信小程序。就紧急对微信小程序进行了调研，阅读过开发者文档后总结了以下的...

kidsamong 2019-08-20 13:44 评论0 收藏0
微信小程序调研文档

摘要：关于微信小程序之前只是听说，并没有引起我太大的兴趣。刚好团队内部有个需求需要微信小程序。暂时没有上线经历，没办法给出这个时间微信小程序的代码包大小当前限制是。关于微信小程序之前只是听说，并没有引起我太大的兴趣。周一被小程序刷屏，然后就顺手搜索了解了一下。发现小程序已经火遍了整个程序员圈子。刚好团队内部有个需求需要微信小程序。就紧急对微信小程序进行了调研，阅读过开发者文档后总结了以下的...

aisuhua 2019-08-05 17:51 评论0 收藏0
从零开始：微信小程序新手入门宝典《一》

摘要：为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里，让大家方便的从零开始学习一微信小程序的特点张小龙张小龙全面阐述小程序，推荐通读此文小程序是一种不需要下载安装即可使用的应用，它出现了触手可及的梦想，用户扫一扫或者搜一下即为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里，让大家方便的从零开始学习；一：微信小程序的特点张小龙：张小龙全面阐述小程...

whataa 2019-07-25 11:18 评论0 收藏0
从零开始：微信小程序新手入门宝典《一》

摘要：为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里，让大家方便的从零开始学习一微信小程序的特点张小龙张小龙全面阐述小程序，推荐通读此文小程序是一种不需要下载安装即可使用的应用，它出现了触手可及的梦想，用户扫一扫或者搜一下即为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里，让大家方便的从零开始学习；一：微信小程序的特点张小龙：张小龙全面阐述小程...

mdluo 2019-08-21 15:02 评论0 收藏0