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;
}
欢迎关注我获取更多微信小程序教程!