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

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

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

下面是样例：

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;
}

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