美文网首页小程序
微信小程序~CSS样式

微信小程序~CSS样式

作者: izhongxia | 来源:发表于2017-01-12 14:44 被阅读667次

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

    效果:

    相关文章

      网友评论

        本文标题:微信小程序~CSS样式

        本文链接:https://www.haomeiwen.com/subject/swwdbttx.html