本文共 1037 字，大约阅读时间需要 3 分钟。

WXSS（WeiXin Style Sheets）是一种专为微信小程序设计的样式语言，它在继承CSS的基础上，做了一些特殊的扩展和调整。

1. 尺寸单位

WXSS引入了rpx（响应式像素）作为新的尺寸单位。这与传统的像素不同，rpx是根据屏幕的实际宽度来计算的。官方规定屏幕宽度为750rpx，这与实际屏幕像素不一定完全对应。例如，在iPhone 6上，屏幕宽为375物理像素，等于750rpx。这样，数据打替换时就需要用固定宽度750rpx来控制布局，而像素比不同设备也会有微小的差异。为了避免手动进行像素换算，WXSS通过rpx来实现 Responsive 设计，虽然底层运算可能会有浮点数误差，但开发者只需要配置rpx单位让小程序自动处理即可。

2. 全局与局部样式

WXSS分为全局样式和局部样式的使用方式。全局样式放在app.wxss文件中，这些样式会影响所有页面。局部分则只作用于特定的页面，优先级高于app.wxss中的样式。这种设计非常适合大型小程序项目的组件化管理，既保证了整体风格的一致性，又允许每个页面根据实际需求进行局部调整。

3. 样式编辑与选择器

与传统CSS不同，WXSS对选择器的支持有限，但也有许多实用的规则。比如，它支持选择器：

• 类选择器：如.intro可以应用到所有拥有该类的组件。
• ID选择器：如#firstname，只能对应唯一一个拥有该属性的元素。
• 元素选择器：如view，可以匹配所有WXML中的<view>组件。
• 组合选择器：比如view, checkbox可以同时匹配多个不同元素。

此外，WXSS还提供了伪类::after和::before，能够在元素前后添加自定义内容，用于复杂的组件装饰。

4. 样式导入与内联样式

WXSS支持对外文件的样式导入，可以使用@import语句引入外部样式表。例如：

@import "common.wxss";
 middle-p { 
   padding:15px;
 }

这种方式可以有效地管理大型项目中的样式重复使用。不过建议谨慎使用，避免因为文件路径错误或重复导入导致性能问题。

除了内联样式（通过<view style="属性:值"></view>），和类样式（通过<view class="类名1 类名2"></view>），WXSS也支持通过<style>标签定义组件的静态样式。这种方式在组件化开发中尤为重要，尤其是在处理动态样式表达时，可以避免样式解析过程的性能损耗。