時間：2017-01-12 11:28:43
零、總結
- app.wxss 是全局樣式文件，對每個頁面都起作用
- 微信小程序樣式可以 @import 其他樣式文件
- 微信小程序樣式和CSS一樣
- 支持常用的 :after,:before, :first-child , nth-child 等常用偽劣選這期
一、引入其他樣式文件
可以使用 @import 導入外聯樣式表， @import 使用 外聯樣式表的相對路徑。
/** demo.wxss **/
.container{
display:flex;
background:red;
}
/** app.wxss **/
@import "demo.wxss";
.container{
background:yellow;
}
最終的結果呢，就是
.container{
display:flex;
background:yellow;
}
二、內聯樣式
用法跟CSS一樣
<view style="color:red;font-size:24rpx; background:{{bg}}"> </view>
其中，bg是動態變化的樣式。
三、class樣式
用法跟css一樣
<view class="container"> </view>
三、app.wxss
在 app.wxss 的樣式是全局樣式，對每一個頁面都起作用。 而在 page 里面的 樣式，作為局部樣式，會覆蓋 全局樣式的樣式
四、支持的選擇器
經過測試得到以下結果
| 選擇器 | demo |
|---|---|
| 類選擇器 | .class |
| ID選擇器 | #id |
| 標簽選擇器 | view |
| 后代選擇器 | .class .child-class |
偽劣選擇器
| 選擇器 | d |
|---|---|
| :after | view:after |
| :before | view:before |
| :first-child | view:first-child |
| :last-child | view:last-child |
| :nth-child | view:nth-child(even) view:nth-child(odd) |
注意： 測試中，發現 css3 的 attr()取值函數可以用，但是只能取到 class 屬性的值， id， 以及其他屬性的值取不到。
效果：
