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

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

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

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

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

1、沒有body

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

page {
    background:#F8F8F8
}

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

2、沒有父子關(guān)系

在使用css的時候，我們經(jīng)常讓樣式的層級關(guān)系和html接點的層級關(guān)系保持一致，比如你的html代碼中有下面代碼

<div class="box">
    <p class="content">
        <strong ></strong>
    </p>
</div>

我們習(xí)慣于css的寫法如下

.box .content strong {}

這樣寫的好處是strong的樣式不會去影響其他地方的strong。 但是 在小程序中并不支持這種父子的層級關(guān)系。你只能一個一個的設(shè)置，看下面的小程序代碼

<view class="box">
    <text class="box-txt"></text>
</view>

針對于上面的視圖，對應(yīng)的wxss應(yīng)該如何寫那？看下面代碼

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

// 錯誤的
.box .box-txt {}

這樣說你明白了吧？！

3、尺寸的變化

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

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

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

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

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

4、樣式導(dǎo)入

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

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

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

5、內(nèi)聯(lián)樣式

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

比如這段代碼

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

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

6、選擇器

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

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

7、全局樣式與局部樣式

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

一點總結(jié)

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