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

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

相关推荐
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang11 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金13 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq14 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷14 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯14 小时前
小程序自定义组件学习笔记
微信小程序
阿眠16 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184119 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
xmdoor21 小时前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
大锦终1 天前
【Linux】第一个小程序—进度条
linux·运维·服务器·小程序