WXSS用于描述WXML的組件樣式，用于決定WXML的組件應該如何顯示。為了適應廣大的前端開發者，它被設計為支持CSS中大部分的特性（但是注意是大部分，還是有一些特性是不支持的），并且有一些自己的擴展和修改。比如引入了一種新的尺寸單位rpx，還有@import這種外聯樣式的導入機制（話說這個功能不是CSS里也有的么...）

關于CSS，我就不在這里介紹它的用法了，這個內容實在有點多，還沒學習過CSS的朋友可以自己找一下資料學習，我在這里主要想講解一下WXSS和CSS之間的不同之處。

樣式的設置

在WXML文件中，我們可以通過style和class屬性為組件設置樣式。不過由于WXML的數據綁定功能的存在，我們就可以動態的設置style和class的屬性值了。比如：

<view style="color:{{color}};padding:{{padding}};">Hello</view>

<view class="message-{{type}}">{{message}}</view>

不過，我們要盡量避免使用style來設置組件的樣式，最好將樣式定義成樣式規則放到樣式文件中(.wxss)，然后通過class屬性來設置。因為組件通過style接收動態樣式，在運行時會進行解析，影響渲染性能。

有限的選擇器

和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組件前面插入內容

其實自己試了一些在CSS中可用，小程序官方沒有聲明在WXSS里支持的選擇器，也是可以生效的。但是有些用了就會把微信web開發者工具給整崩潰掉，所以，還是不要在實際開發中使用這類沒說支持的選擇器了，雖然在有的場景下麻煩了點，但是以上支持了的選擇器還是基本夠用了。

全局樣式與局部樣式

WXSS中有全局樣式與局部樣式之分。

定義在app.wxss文件中的樣式為全局樣式，將會對每一個頁面起作用。

而定義為page同名的wxss文件，則稱為局部樣式，只會針對對應的頁面起作用，而且樣式優先級比全局樣式要高，可以覆蓋全局樣式。

新的尺寸單位

最后來說一下WXSS中新增和擴展的尺寸單位，對于做屏幕的自適應是非常有幫助的。

• rpx (responsive pixel，響應式px)，簡單來說，就是不管什么尺寸的設備，總是認為屏幕寬度是750rpx
• rem (root em，根em)，也很簡單，就是不管什么尺寸的設備，總是認為屏幕的寬度是20rem。

所以rpx和rem之間的換算，就是：

1rem = (750/20)rpx = 37.5rpx

設計師的設計稿一般都是按照px來做單位的，那么在開發階段，開發人員就需要在px和rpx之間進行換算，具體可以如下來計算：

rpx = (屏幕實際寬度/750)px
px = (750/屏幕實際寬度)rpx

因此，如果設計師的設計是以iphone6屏幕尺寸為參照(iphone6的屏幕寬度為375px)，則：

1rpx = (375/750)px = 0.5px
1px = (750/375)rpx = 2rpx

是不是很容易理解？

好了，關于微信小程序樣式WXSS的關鍵點內容，就講解到這里，不對的地方歡迎指正。謝謝啦。