官方文件地址 mp.weixin.qq.com/debug/wxado…

問題來了？既然如此，我們為何還要寫這篇文章？

答案只有一個，讓你更快的“易懂”，換換思路，接下來的文章會對官方文件做一個段落類的解釋。

為了適應廣大的前端開發者，WXSS 具有 CSS 大部分特性。同時為了更適合開發微信小程式，WXSS 對 CSS 進行了擴充以及修改。與 CSS 相比，WXSS 擴充套件的特性有：尺寸單位和樣式匯入。

補充：關於擴充套件的特性我們下面會說，既然文件說了WXSS具有CSS 大部分特性，那麼有什麼不同那？

1、沒有body
是的，在小程式的每一個page裡是沒有body屬性的，不過你可以通過在wxss中對page的設定來影響整個頁面的樣式，比如下面的程式碼

page {
    background:#F8F8F8
}複製程式碼

諸如此類，當然你也可以設定page的xxx.json中的backgroundColor屬性來影響一個page頁面下拉時出現的空白區域的顏色，一般來說當你頁面有下拉重新整理和上拉載入功能時，往往要設定backgroundColor屬性。

2、沒有父子關係
在使用css的時候，我們經常讓樣式的層級關係和html接點的層級關係保持一致，比如你的html程式碼中有下面程式碼

<div class="box">
    <p class="content">
        <strong ></strong>
    </p>
</div>複製程式碼

我們習慣於css的寫法如下

.box .content strong {}複製程式碼

這樣寫的好處是strong的樣式不會去影響其他地方的strong。但是在小程式中並不支援這種父子的層級關係。你只能一個一個的設定，看下面的小程式程式碼

<view class="box">
    <text class="box-txt"></text>
</view>複製程式碼

針對於上面的檢視，對應的wxss應該如何寫那？看下面程式碼

// 正確的
.box {}
.box-txt {}

// 錯誤的
.box .box-txt {}複製程式碼

這樣說你明白了吧？！

3、尺寸的變化
在css中我們有很多衡量尺寸的單位，比如px、em等等，當然這些在小程式中也依然可以使用，但是小程式又為自己增加了一個單位，那就是rpx。

小程式作為移動端的應用需要適配不同規格的裝置並且相容越來越大的手機（話說我依然喜歡iphone5的尺寸，單手可控而且床上看電影不會砸到頭）。

所以rpx最重要的特性就是可以根據螢幕寬度進行自適應。它規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。

算明白了麼？官方給了一個表格，很淺顯易懂，見下圖。

這個換算比較簡單，不在講解，如果你真不懂可以留言。

4、樣式匯入
小程式的wxss支援樣式的匯入，這個功能相當有用，尤其是我們使用一些其他庫的時候可以直接匯入第三方的wxss檔案，何其樂哉。

用法也很簡單，看看下面程式碼。

@import "common.wxss";
.middle-p {
  padding:15px;
}複製程式碼

5、內聯樣式
和css一樣，wxss支援class和style兩種樣式，但是在用法上還是有區別的，一句話概括：“如果你的樣式中存在動態內容，將其寫到style中，其他的都放到class檔案，

比如這段程式碼

<view style="color:{{color}};" />複製程式碼

將過多的樣式寫到style中帶來的問題就是小程式在渲染檢視的時候還要伴隨著解析對應的樣式佈局等，必然對效能有一些影響。

6、選擇器
另外對於css中的選擇器，wxss基本都支援了，比如類、ID、元件等，看看下面官方給的圖

而且類似於last-child等css的高階屬性，在wxss你也可以愉快的使用。

7、全域性樣式與區域性樣式
原則上一個在小程式中一個wxss負責一個wxml檢視檔案，但是對於一個應用來說總會有一些公用的屬性，因此小程式為應用自身提供了一個wxss，那就是app.wxss，當然你無需人工引入，它會自動的載入到每一個檢視上，這點要記住。

一點總結

關於wxss到底對css支援了哪些，微信官方並沒有給出相應的文件，更多細節我們要慢慢挖掘，畢竟騰訊不是百度，會把文件寫的那麼好。