时间：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， 以及其他属性的值取不到。
效果：
