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

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

下面是样例：

wxml：

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

wxss：

/*使用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支持组合筛选，使用空格分开，如下：

/*选择的是.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;
}

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