微信小程序wxss定位/选择/查找元素的几种方式

wxss定位、选择、查找元素的几种方式与css类似,下面介绍常用的几种:

|------------------|----------------|---------------------------------|
| 选择器 | 样例 | 样例描述 |
| .class | .intro | 选择所有拥有 class="intro" 的组件 |
| #id | #firstname | 选择拥有 id="firstname" 的组件 |
| element | view | 选择所有 view 组件 |
| element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |

下面是样例:

wxml:

html 复制代码
<view class="tool" id="tool-id">
  <view>绘制展厅</view>
  <view>制作展会名片</view>
  <view>签到</view>
  <view>抽奖</view>
  <view>礼品领取</view>
</view>

wxss:

css 复制代码
/*使用class进行选择*/
.tool{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/*使用id进行选择*/
#tool-id{
  width: 200rpx;
  height: 200rpx;
  background-color: rgba(0, 162, 255, 0.514);
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  font-size: large;
  font-weight: bold;
  margin: 10rpx;
}

/*使用框架容器类型进行选择,选择所有view*/
view{

}

xcss支持组合筛选,使用空格分开,如下:

css 复制代码
/*选择的是.tool元素下所有的view容器*/
.tool view{
  width: 200rpx;
  height: 200rpx;
  background-color: rgba(0, 162, 255, 0.514);
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  font-size: large;
  font-weight: bold;
  margin: 10rpx;
}

欢迎关注我获取更多微信小程序教程!

相关推荐
Stanford_11061 小时前
关于嵌入式硬件需要了解的基础知识
开发语言·c++·嵌入式硬件·微信小程序·微信公众平台·twitter·微信开放平台
明月(Alioo)1 小时前
用AI帮忙,开发刷题小程序:软考真经微信小程序API接口文档(更新版)
微信小程序·小程序
克里斯蒂亚诺更新7 小时前
微信小程序的页面生命周期 以及onShow的应用场景
微信小程序·小程序
江城开朗的豌豆9 小时前
小程序避坑指南:这些兼容性问题你遇到了几个?
前端·javascript·微信小程序
江城开朗的豌豆9 小时前
玩转小程序页面跳转:我的路由实战笔记
前端·javascript·微信小程序
00后程序员张10 小时前
苹果软件混淆的工程逻辑,从符号空间到资源扰动的体系化实现
android·ios·小程序·https·uni-app·iphone·webview
zluz_18 小时前
微信小程序,组件中使用全局样式
微信小程序·小程序
明月(Alioo)20 小时前
用AI帮忙,开发刷题小程序:微信小程序中实现Markdown图片解析与渲染功能详解
微信小程序·小程序·aigc
aiguangyuan1 天前
微信小程序中的双线程模型及数据传输优化
微信小程序·前端开发
说私域1 天前
技术指数变革下的组织适应性研究:基于定制开发开源AI智能名片S2B2C商城小程序的实践观察
人工智能·小程序·开源