官方文檔地址
https://mp.weixin.qq.com/debu...
問題來了？既然如此，我們?yōu)楹芜€要寫這篇文章？
答案只有一個，讓你更快的“易懂”，換換思路，接下來的文章會對官方文檔做一個段落類的解釋。
為了適應(yīng)廣大的前端開發(fā)者，WXSS 具有 CSS
大部分
特性。同時(shí)為了更適合開發(fā)微信小程序，WXSS 對 CSS 進(jìn)行了擴(kuò)充以及修改。與 CSS 相比，WXSS 擴(kuò)展的特性有：尺寸單位和樣式導(dǎo)入。
補(bǔ)充：關(guān)于擴(kuò)展的特性我們下面會說，既然文檔說了WXSS具有CSS 大部分特性，那么有什么不同那？
1、沒有body
是的，在小程序的每一個page里是沒有body屬性的，不過你可以通過在wxss中對page的設(shè)置來影響整個頁面的樣式，比如下面的代碼
page {
background:#F8F8F8
}
諸如此類，當(dāng)然你也可以設(shè)置page的xxx.json中的backgroundColor屬性來影響一個page頁面下拉時(shí)出現(xiàn)的空白區(qū)域的顏色，一般來說當(dāng)你頁面有下拉刷新和上拉加載功能時(shí)，往往要設(shè)置backgroundColor屬性。
2、沒有父子關(guān)系
在使用css的時(shí)候，我們經(jīng)常讓樣式的層級關(guān)系和html接點(diǎn)的層級關(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è)備并且兼容越來越大的手機(jī)（
話說我依然喜歡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)有用，尤其是我們使用一些其他庫的時(shí)候可以直接導(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中帶來的問題就是小程序在渲染視圖的時(shí)候還要伴隨著解析對應(yīng)的樣式布局等，必然對性能有一些影響。
6、選擇器
另外對于css中的選擇器，wxss基本都支持了，比如類、ID、組件等，看看下面官方給的圖
而且類似于last-child等css的高級屬性，在wxss你也可以愉快的使用。
7、全局樣式與局部樣式
原則上一個在小程序中一個wxss負(fù)責(zé)一個wxml視圖文件，但是對于一個應(yīng)用來說總會有一些公用的屬性，因此小程序?yàn)閼?yīng)用自身提供了一個wxss，那就是app.wxss，當(dāng)然你無需人工引入，它會自動的加載到每一個視圖上，這點(diǎn)要記住。
一點(diǎn)總結(jié)
關(guān)于wxss到底對css支持了哪些，微信官方并沒有給出相應(yīng)的文檔，更多細(xì)節(jié)我們要慢慢挖掘，畢竟騰訊不是百度，會把文檔寫的那么好。
相關(guān)閱讀：
小北微信小程序小白系列教程第一篇-- Hello World
本文作者：北哥 個人站長 @ 北哥兄弟連
原文地址：小北微信小程序之小白教程系列之-樣式（WXSS）-新手教程-小程序社區(qū)-微信小程序-微信小程序開發(fā)社區(qū)-小程序開發(fā)論壇-微信小程序聯(lián)盟
