微信小程序~CSS样式

[zhongxia245]

时间：2017-01-12 11:28:43

零、总结

1. app.wxss 是全局样式文件，对每个页面都起作用
2. 微信小程序样式可以 @import 其他样式文件
3. 微信小程序样式和CSS一样
4. 支持常用的 :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， 以及其他属性的值取不到。

效果：