WXSS和CSS之间的不同之处
小程序的开发框架采用了与Web开发中所使用的CSS（层叠样式表）几乎相同的一种机制，称作WXSS(weiXin Style Sheets）。
WXSS用于描述WXML的组件样式，引入了一种新的尺寸单位rpx。
文档里说扩展的特性还有 样式导入，这个CSS里也是支持的。
/*引入样式表的相对路径*/
@import "common.wxss";
样式的设置
框架组件上支持使用 style、class 属性来控制组件的样式。
因为WXML支持数据绑定，所以style和class可以通过数据绑定来动态改变。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:{{color}};padding:{{padding}};">Hello</view>
class：样式类名不需要带上.，样式类名之间用空格分隔。
<view class="sclected == true?'active':''"></view>
<view class="navBar navBar-box"></view>
新的尺寸单位 rpx
- rpx (responsive pixel，响应式px)，不管什么尺寸的设备，总是认为屏幕宽度是750rpx
- rem (root em，根em)，不管什么尺寸的设备，总是认为屏幕的宽度是20rem。
所以rpx和rem之间的换算，就是：
1rem = (750/20)rpx = 37.5rpx
因此，如果设计师的设计是以iphone6屏幕尺寸为参照(iphone6的屏幕宽度为375px)，则：
1rpx = (375/750)px = 0.5px
1px = (750/375)rpx = 2rpx
有限的选择器
和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组件前面插入内容 |
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。