@layer

css中的@layer声明了一个 级联层, 开发者可以控制级联规则,可以对级联进行排序。
有了此功能,对于组件或者模块的CSS,可以全部写在@layer的规则中,把自身的优先级降到底部,这样对于引入的UI库和组件库的样式,我们可以很轻松的再次定制和覆盖他的样式,而不必考虑烦人的优先级。

@layer common,base,reset;
@layer common{
  button {
    color:blue;
  }
}
@layer base{
  button {
    color:red;
  }    
}

上面的button的颜色应该是red;
这三个layer的优先级从低到高依次为:common> base > reset,common组件的样式优先级最低,这样方便我们在项目中对样式的一个控制。

兼容性

image.png

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • @layer的作用可以让 CSS 声明的优先级下降一整个级联级别 比如说我们用了一些ui的框架,但是在实际开发当中...
    keknei阅读 5,609评论 0 0
  • 本文是本人自己辛苦翻译的,请转载的朋友注明,翻译于Z.MJun的简书 ,感谢!<翻译不容易啊> 翻译于2015年1...
    ZMJun阅读 3,021评论 0 0
  • layer参数配置 官网API:http://layer.layui.com layer API之键值(仅在需要时...
    奶油小生Cc阅读 10,010评论 0 1
  • 序言 如果我们仔细回顾一下今年区块链技术的进展,就会发现各种有新的想法的公链团队越来越少出现了,大家谈论以及关注的...
    JackXiao2017阅读 20,541评论 0 19
  • type - 基本层类型 类型:Number,默认:0layer提供了5种层类型。可传入的值有:0(信息框,默认)...
    hopevow阅读 16,879评论 5 2