摘要:要让我们的微信小程序外表变得更引人注目，就需要为其添加一种样式的机制。在小程序称作WXSS

在以往的Web开发中通常使用XML和CSS来做页面样式与布局，微信小程序中界面布局则是一个WXML文件，但是WXML只是一个界面的骨架。要让我们的微信小程序外表变得更引人注目，就需要为其添加一种样式的机制。小程序的开发框架采用了与Web开发中所使用的CSS几乎相同的一种机制，这种样式机制在小程序中称作WXSS。

WXSS用于描述WXML的组件样式，用于决定WXML的组件应该如何显示。为了适应广大的前端开发者，它被设计为支持CSS中大部分的特性，并且有一些自己的扩展和修改。

样式的设置

在WXML文件中，我们可以通过style和class属性为组件设置样式。不过由于WXML的数据绑定功能的存在，我们就可以动态的设置style和class的属性值了。比如：

Hello

{{message}}

不过，我们要尽量避免使用style来设置组件的样式，最好将样式定义成样式规则放到样式文件中(.wxss)，然后通过class属性来设置。因为组件通过style接收动态样式，在运行时会进行解析，影响渲染性能。

新的尺寸单位

WXSS中新增和扩展的尺寸单位，对于做屏幕的自适应是非常有帮助的。

rpx (responsive pixel，响应式px)，简单来说，就是不管什么尺寸的设备，总是认为屏幕宽度是750rpx

rem (root em，根em)，也很简单，就是不管什么尺寸的设备，总是认为屏幕的宽度是20rem。rpx和rem之间的换算为1rem = (750/20)rpx = 37.5rpx。开发人员就需要在px和rpx之间进行换算，具体为以下规则：

rpx = (屏幕实际宽度/750)px

px = (750/屏幕实际宽度)rpx

全局样式与局部样式

WXSS中有全局样式与局部样式之分。

定义在app.wxss文件中的样式为全局样式，将会对每一个页面起作用。

而定义为page同名的wxss文件，则称为局部样式，只会针对对应的页面起作用，而且样式优先级比全局样式要高，可以覆盖全局样式。

有限的选择器

和CSS不一样，小程序的WXSS支持的选择器的类型有限，官方文档中明确列出说支持的，目前只有以下几种选择器：

.class：类选择器，例如.error-msg，它会选择所有class=error-msg的组件

#id：ID选择器，例如#my-container，它会选择id=my-container的组件

element：元素选择器，例如view，它会选择所有view组件

element, element：多选择器，例如view, button，它会选择所有view和button组件

::after：例如view::after，它会在view组件后面插入内容

::before：例如view::after，它会在view组件前面插入内容

小程序官方没有声明在WXSS里支持的选择器，也是可以生效的。但是有些用了就会把微信web开发者工具给整崩溃掉，所以，还是不要在实际开发中使用这类没说支持的选择器了，虽然在有的场景下麻烦了点，但是以上支持了的选择器还是基本够用了。

推荐阅读：小程序开发如何接入微信支付功能