微信小程序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;
}

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

相关推荐
幽络源小助理1 小时前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
zoahxmy092914 小时前
微信小程序 request 流式数据处理
微信小程序
人人题15 小时前
汽车加气站操作工考试答题模板
笔记·职场和发展·微信小程序·汽车·创业创新·学习方法·业界资讯
曲江涛17 小时前
微信小程序 webview 定位 并返回
微信小程序·小程序
weixin_4404705017 小时前
部署Dify接入微信验证反代根目录创建一个文件通过微信小程序验证
微信小程序·腾讯云
276695829218 小时前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿
web_Hsir19 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir19 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa20 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
Angus-zoe20 小时前
微信小程序唤起app
微信小程序·小程序