评论

微信小程序开发实践笔记(二) 引用外部WXSS及样式优先级

引用外部WXSS及样式优先级

一、为什么会需要引用外部wxss?

和wxml一样,我们在使用样式时,有时会遇到大体量的冗余代码,一般如果只有比较少的话,直接在page.wxss中合并同类项差不多了,但有时会有大量的代码,经常需要用到,如果在每一个page中都写这么多,代码冗余,增加程序体量,影响加载速度,所以我们就想了个办法,将他们提取出来,在需要的时候引入。这样,只写一套代码,想用即调,很方便,减少了程序的体量。
常见的是:初始化wxss、具体的项目组开发公用wxss

二、外部wxss引用语法

使用@import +" wxss路径 + xxx.wxss",@import是通用调用关键字,相对路径和文件名需开发者自定义修改,xxx仅占位使用

@import "/xxx.wxss";

三、wxss样式优先级

样式类别 优先级权重 优先级排序
!important 1
style 1000 2
id 100 3
class 10 4
tagName 1 5
外部 wxss 相同权重,遵循后面的会覆盖前面的 6

微信开发者手册 如何引入外部wxss 点击查看

最后一次编辑于  2019-05-31  
点赞 2
收藏
评论

2 个评论

  • 小醉月思
    小醉月思
    2019-05-31

    外部CSS看引入顺序的,如果你写在顶部,就会被覆盖,如果在尾部就会生效,对应优先级按上面的。

    2019-05-31
    赞同 1
    回复 1
    • 2019-05-31

      经验证,兄台所说不差,谢谢

      2019-05-31
      回复
  • 2019-05-31

    不当之处,恭请指正

    2019-05-31
    赞同
    回复
登录 后发表内容