样式#

在开发Web网站时,我们通常使用CSS来定义页面的样式。而在微信小程序中,我们使用的是WXSS,它类似于CSS,但专为小程序设计。WXSS不仅继承了CSS的大部分特性,还进行了一些扩充和修改,如新增了尺寸单位 rpx、提供了全局的样式和局部样式,另外需要注意的是WXSS 仅支持部分 CSS 选择器。

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

全局样式和局部样式#

在微信小程序中,样式可以通过两种方式进行管理：全局样式和局部样式。

全局样式：

• 全局样式定义在 app.wxss 文件中,这意味着这些样式规则将应用于小程序的所有页面。
• 它们通常用于设置整个小程序的通用属性,如字体大小、背景颜色、宽度等,以确保用户界面的一致性。

局部样式：

• 局部样式定义在每个页面对应的 .wxss 文件中,例如 page.wxss。
• 这些样式规则仅对该特定页面有效,使得开发者可以为每个页面定制独特的视觉风格。
• 局部样式具有更高的优先级,会覆盖 app.wxss 中相同选择器的样式,从而允许对全局样式进行局部的调整和重写。

通过合理利用全局样式和局部样式,开发者可以既保持小程序整体风格的统一性,又能够为特定页面提供个性化的设计,以达到最佳的用户体验。