时间: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, 以及其他属性的值取不到。
效果:
网友评论