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

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

相关推荐
00后程序员张7 分钟前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差10 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张11 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬12 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063212 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI13 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_1772972206914 小时前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld14 小时前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄16 小时前
mobx-miniprogram小程序的数据传输
小程序
说私域18 小时前
“开源AI智能名片链动2+1模式S2B2C商城小程序”在直播公屏引流中的应用与效果
人工智能·小程序·开源