官方文檔地址 https://mp.weixin.qq.com/debu...

問題來了？既然如此，我們?yōu)楹芜€要寫這篇文章？

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

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

補充：關于擴展的特性我們下面會說，既然文檔說了WXSS具有CSS 大部分特性，那么有什么不同那？

1、沒有body

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

page {
    background:#F8F8F8
}

諸如此類，當然你也可以設置page的xxx.json中的backgroundColor屬性來影響一個page頁面下拉時出現(xiàn)的空白區(qū)域的顏色，一般來說當你頁面有下拉刷新和上拉加載功能時，往往要設置backgroundColor屬性。

2、沒有父子關系

在使用css的時候，我們經(jīng)常讓樣式的層級關系和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 。

小程序作為移動端的應用需要適配不同規(guī)格的設備并且兼容越來越大的手機（ 話說我依然喜歡iphone5的尺寸，單手可控而且床上看電影不會砸到頭 ）。

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

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

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

4、樣式導入

小程序的wxss支持樣式的導入，這個功能相當有用，尤其是我們使用一些其他庫的時候可以直接導入第三方的wxss文件，何其樂哉。

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

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

5、內聯(lián)樣式

和css一樣，wxss支持class和style兩種樣式，但是在用法上還是有區(qū)別的，一句話概括：“如果你的樣式中存在動態(tài)內容，將其寫到style中，其他的都放到class文件，

比如這段代碼

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

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

6、選擇器

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

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

7、全局樣式與局部樣式

原則上一個在小程序中一個wxss負責一個wxml視圖文件，但是對于一個應用來說總會有一些公用的屬性，因此小程序為應用自身提供了一個wxss，那就是app.wxss，當然你無需人工引入，它會自動的加載到每一個視圖上，這點要記住。

一點總結

關于wxss到底對css支持了哪些，微信官方并沒有給出相應的文檔，更多細節(jié)我們要慢慢挖掘，畢竟騰訊不是百度，會把文檔寫的那么好。