往 css 优先级中存在的问题

如果我们的页面上存在非常多的样式，譬如有我们开发页面的时候的自定义样式，也有引入的组件库样式。这时候样式将会非常混乱难以管理。

当我们想覆盖一些本身非我们书写的样式时候，往往不得不通过使用优先级权重更高的样式名，去覆盖那些样式。

同时，当样式优先级感到难以控制时，开发者习惯滥用 !important 去解决，这又循环导致了后续更混乱的样式结构。

基于让 CSS 得到更好的控制和管理的背景，CSS @layer 应运而生。

何为 CSS @layer？

CSS Cascade Layers，也叫做CSS级联层，是Cascading and Inheritance Level5 规范中新增了一个新的 CSS 特性。

@layer声明了一个 级联层， 同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。语法也非常简单，看这样一个例子：

@layer utilities {

  /* 创建一个名为 utilities 的级联层 */

}

这样，我们就创建一个名为 utilities 的 @layer 级联层。

@layer语法

@layer规则可以通过三种方式其一来创建级联层。第一种方法如上方代码所示，它创建了一个块级的@规则，其中包含作用于该层内部的CSS规则。

@layer utilities {

  .padding-sm {

    padding: .5rem;

  }




  .padding-lg {

    padding: .8rem;

  }

}

一个级联层同样可以通过 @import 来创建，规则存在于被引入的样式表内：

@import(utilities.css) layer(utilities);

你也可以创建带命名的级联层，但不指定任何样式。例如，单一的命名层：

@layer utilities

或者，多个命名层也可以被同时定义。例如：

@layer theme, layout, utilities

这一做法很有用，因为层最初被指定的顺序决定了它是否有父级层。对于声明而言，如果同一声明在多个级联层中被指定，最后一层中的将优先于其他层。

因此，在上面的例子中，如果 theme 层和 utilities 层中存在冲突的规则，那么 utilities 层中的将优先被应用。

即使 utilities 层中规则的 优先级低于 theme 层中的，该规则仍会被应用。一旦级联层顺序建立之后，优先级和出现顺序都会被忽略。

这将使创建CSS选择器变得更加简单，因为你不需要确保每一个选择器都有足够高的优先级来覆盖其他冲突的规则，你只需要确保它们出现在一个顺序更靠后的级联层中。

注：在已经声明级联层的名字后，它们的顺序随即被确立，你可以重复声明某级联层的名字来向其添加CSS规则。这些样式将被附加到该层的末尾，且级联层之间的顺序不会改变。

其他不属于任何一级联层的样式将被集中到同一匿名层，并置于所有层的前部，这意味着任何级联层内定义的规则都将覆盖外部声明的规则。

嵌套层

级联层允许嵌套，例如：

@layer framework {

  @layer layout {




  }

}

向 layout 层内部的 framework 层附加规则，只需用 . 连接这两层。

@layer framework.layout {

  p {

    margin-block: 1rem;

  }

}

匿名层

如果创建了一个级联层但并未指定名字，例如：

@layer {

  p {

    margin-block: 1rem;

  }

}

那么则称为创建了一个匿名层。除创建后无法向其添加规则外，该层和其他命名层功能一致。

标准语法

@layer [ <layer-name># | <layer-name>?  {

  <stylesheet>

} ]

@layer如何使用

创建级联层

级联层可以通过多种方式声明：

1、使用@layer 块规则，并立即为其分配样式：

@layer reset {

  * { /* Poor Man's Reset */

    margin: 0;

    padding: 0;

  }

}

2、使用规则@layer 语句，没有指定任何样式：

@layer reset;

3、将@import 与layer关键字或layer()函数一起使用

@import(reset.css) layer(reset);

以上每一个都创建了一个名为 的级联层reset。

管理级联层

级联层会按它们声明的顺序排序。

在下面的例子中，我们建立四个级联层：reset，base，theme，和utilities。

@layer reset { /* 创建级联层 “reset” */

  * {

    margin: 0;

    padding: 0;

  }

}




@layer base { /* 创建级联层 “base” */

  …

}




@layer theme { /* 创建级联层 “theme” */

  …

}




@layer utilities { /* 创建级联层 “utilities” */

  …

}

按照它们的声明顺序，层顺序变为：

reset
base
theme
utilities

重复使用级联层名称时，样式将附加到现有级联层。级联层的顺序保持不变，因为只有第一次的出现已经确定顺序：

@layer reset { /* 创建第一个级联层 “reset” */

  …

}




@layer base { /* 创建第二个级联层 “base” */

  …

}




@layer theme { /* 创建第三个级联层 “theme” */

  …

}




@layer utilities { /* 创建第四个级联层 “utilities” */

  …

}




@layer base { /* 会将样式添加至级联层“base” */

  …

}

重新使用级联层名称时层顺序保持不变的使@layer 语法变得更加方便和严谨。使用它，可以预先建立图层顺序，然后将所有 CSS 附加到它：

@layer reset;     /* 创建第一个级联层 “reset” */

@layer base;      /* 创建第二个级联层 “base” */

@layer theme;     /* 创建第三个级联层“theme” */

@layer utilities; /* 创建第四个级联层 “utilities” */




@layer reset { /* 添加样式至级联层 “reset” */

  …

}




@layer theme { /* 添加样式至级联层  “theme” */

  …

}




@layer base { /* 添加样式至级联层  “base” */

  …

}




@layer theme { /* 添加样式至级联层  “theme” */

  …

}

当然你可以用更短的语法来声明级联层，

@layer reset, base, theme, utilities;

从上面可以看出，多个级联层被声明时，最后一个级联层的声明会获胜。像这样，

@import(reset.css) layer(reset); /* 第一个级联层 */




@layer base { /* 第二个级联层 */

  form input {

    font-size: inherit; 

  }

}




@layer theme { /*第三个级联层 */

  input {

    font-size: 2rem;

  }

}

按以往CSS级联来进行分析的话，form input（多层级）的优先级会大于input,但是由于级联层所起的作用，@layer theme的input会取胜。

级联层嵌套

级联层支持嵌套使用，如下：

@layer base { /* 第一个级联层*/

  p { max-width: 70ch; }

}




@layer framework { /* 第二个级联层 */

  @layer base { /* 第二级联层的嵌套子级联层1 */

    p { margin-block: 0.75em; }

  }




  @layer theme { /* 第二级联层的嵌套子级联层2 */

    p { color: #222; }

  }

}

在这个例子中有两个级联外层：

base
framework

该framework层本身也包含两层：
base
theme

如果要将样式附加到嵌套级联层，需要使用以下全名来引用它，

@layer framework {

  @layer default {

     p { margin-block: 0.75em; }

  }




  @layer theme {

    p { color: #222; }

  }

}




@layer framework.theme {

  /* 这些样式会被添加到@layer framework层里面的theme层 */

  blockquote { color: rebeccapurple; }

}

@media与@layer

@media (min-width: 30em) {

  @layer layout {

    .title { font-size: x-large; }

  }

}




@media (prefers-color-scheme: dark) {

  @layer theme {

    .title { color: white; }

  }

}

如果第一个@media (min-width: 30em)匹配（基于视口尺寸），则layout级联层层将在图层顺序中排在第一位。如果只有@media (prefers-color-scheme: dark)匹配，theme则将是第一层。

如果两者匹配，则图层顺序将为layout, theme。如果没有匹配，则不定义层。

实际 Web 开发过程中，总会遇到各种各样的布局，比如下面的各种“优惠券”，一起来看看吧

一、最佳实现方式

首先，碰到这类布局的最佳实现肯定是 mask遮罩 。关于遮罩，可以看一下 CSS3 Mask 安利报告 。这里简单介绍一下

基本语法很简单，和 background 的语法基本一致

.content{
  -webkit-mask: '遮罩图片' ;
}


/*完整语法*/
.content{
  -webkit-mask: '遮罩图片' [position] / [size] ;
}

这里的遮罩图片和背景的使用方式基本一致，可以是PNG图片、SVG图片、也可以是渐变绘制的图片，同时也支持多图片叠加。

遮罩的原理很简单，最终效果只显示不透明的部分，透明部分将不可见，半透明类推

事实上，除了根据透明度（Alpha）来作为遮罩条件，还可以通过亮度（luminance）来决定，比如白色表示隐藏，黑色表示可见。不过目前只有 Firefox 支持

所以，只要能绘制以上各种形状，就可以实现了。

二、内凹圆角

优惠券大多有一个很明显的特点，就是内凹圆角。提到圆角，很容易想到 radial-gradient 。这个语法有点复杂，记不住没关系，可以看看张老师的这篇 10个demo示例学会CSS3 radial-gradient径向渐变 。

.content{
  -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); 
}

这样就绘制了一个半径为 20px 的透明的圆，不过代码层面还有很多优化的空间。

1. 在实现边界分明的渐变时，后面颜色的位置只需要小于等于前面颜色的位置就行了，比如 0
2. 透明颜色可以用16进制 缩写比如#0000 来代替， 不透明的部分随便用一个颜色就好，我喜欢用 red，主要是这个单词比较短
3. 还有渐变的位置默认是居中的，所以第二个center可以去除，left 可以用 0 来表示

进一步简化就得到了

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0); 
}

不错，又少了好几个B的流量~ 可以查看在线实例 codepen 优惠券实现1

三、优惠券效果

上面是一个最基本的内凹圆角效果，现在来实现下面几种布局，比如两个半圆的，根据上面的例子，再复制一个圆不就可以了？改一下定位的方向

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
}

这时发现一个圆都没有了。原因其实很简单，如下演示，两层背景相互叠加，导致整块背景都成了不透明的，所以 mask 效果表现为全部可见。

解决方式有2个，分别是：

1. 把两个凹角的地方错开，这里可以通过修改尺寸和位置，同时还需要禁止平铺

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
  -webkit-mask-size: 51%; /*避免出现缝隙*/
  -webkit-mask-position: 0, 100%; /*一个居左一个居右*/
  -webkit-mask-repeat: no-repeat;
}

动态演示如下，这样就不会互相覆盖了

可以查看在线实例 codepen 优惠券实现2

2. 使用遮罩合成 mask-composite ，这个可能不太熟悉，简单介绍一下

标准属性下 mask-composite 有 4 个属性值（Firefox支持）

/* Keyword values */
mask-composite: add; /* 叠加（默认） */
mask-composite: subtract; /* 减去，排除掉上层的区域 */
mask-composite: intersect; /* 相交，只显示重合的地方 */
mask-composite: exclude; /* 排除，只显示不重合的地方 */

这个可能有些不好理解，其实可以参考一些图形软件的形状合成操作，比如 photoshop

-webkit-mask-composite 与标准下的值有所不同，属性值非常多，看下面

-webkit-mask-composite: clear; /*清除，不显示任何遮罩*/
-webkit-mask-composite: copy; /*只显示上方遮罩，不显示下方遮罩*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /*只显示重合的地方*/
-webkit-mask-composite: source-out; /*只显示上方遮罩，重合的地方不显示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /*只显示重合的地方*/
-webkit-mask-composite: destination-out;/*只显示下方遮罩，重合的地方不显示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只显示不重合的地方*/

是不是一下就懵了？不用慌，可以看到上面有几个值是 source-*，还有几个是 destination-*开头的，source 代表新内容，也就是上面绘制的图层， destination 代表元内容，也就是下面绘制的图层（在CSS中，前面的图层会覆盖后面的图层），这里的属性值其实是借用了Canvas 中的概念，具体可以查看 CanvasRenderingContext2D.globalComposite

记不住没关系，实际开发可以逐一试验[捂脸]。具体差异可以查看 codepen -webkit-mask-composite 属性值演示

了解这个属性后，上面的叠加问题就很简单了，设置只显示重合的地方就行了

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}

动态演示如下，这样只会显示互相重合的地方

可以查看在线实例 codepen 优惠券实现3

2个圆角的实现了，4个的就很容易了，画4个圆就行，同样利用遮罩合成可以轻易实现

content{
  -webkit-mask: radial-gradient(circle at 0 0, #0000 20px, red 0), radial-gradient(circle at right 0, #0000 20px, red 0), radial-gradient(circle at 0 100%, #0000 20px, red 0), radial-gradient(circle at right 100%, #0000 20px, red 0); /*4个角落各放一个圆*/
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}

可以查看在线实例 codepen 优惠券实现4

四、优惠券平铺效果

上面的例子展示了2个圆角和4个圆角的效果，分别绘制了2个和4个圆，其实这是可以通过平铺来实现的，只需要一个圆就可以。实现步骤如下

1. 画一个左中的靠边的透明圆

.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
}

2. 向左平移自身的一半

.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px
}


/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px; 
}

效果就出来了，是不是很神奇？其实就是利用到了默认的 repeat特性，这里用一张动图就能明白了

下面红色边框内表示视区范围，也就是最终的效果，这里为了演示，把视线之外的平铺做了半透明处理，移动表示 position 改变的过程

可以查看在线实例 codepen 优惠券实现5

同样原理，4个圆角也可以采用这种方式实现

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
}


/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px; 
}

实现原理演示如下

可以查看在线实例 codepen 优惠券实现6

6个圆角就需要改一下平铺尺寸了。

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
  -webkit-mask-size: 50%;
}


/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

实现原理演示如下

可以查看在线实例 codepen 优惠券实现7

如果继续缩小背景图的尺寸，还可以得到最后的效果

.content{
  -webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); 
  -webkit-mask-position: -10px;
  -webkit-mask-size: 100% 30px;
}


/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -10px / 100% 30px; 
}

实现原理演示如下，其实就平铺

可以查看在线实例 codepen 优惠券实现8

五、反向镂空叠加

有些情况下可能单一的一层渐变绘制不了很复杂的图形，这就需要用到反向镂空技术了，其实就是上面提到过的遮罩合成 ，这里再运用一下

1. 先把上面的实现拿过来

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

2. 直接在这个基础上打一排小洞

.content{
  -webkit-mask: radial-gradient( circle at 50%, red 5px, #0000 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}

注意这里用到了 -webkit-mask-composite: destination-out，表示减去，只显示下方遮罩，重合的地方不显示

可以查看在线实例 codepen 优惠券实现9

也可以放在两边，改一下 position 就可以了

.content{
  -webkit-mask: radial-gradient( circle at 5px, red 5px, #0000 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}

可以查看在线实例 codepen 优惠券实现10

六、边框遮罩

有些同学觉得径向渐变太复杂，实在是写不出来，能不能用图片代替呢？其实也是可行的。这里说的边框遮罩指的是 mask-border , 目前还在 W3C 草案当中，不过有一个替代属性 -webkit-mask-box-image

语法和概念和 border-image 非常相似，关于 border-image 可参考这篇文章 border-image 的正确用法，这里主要了解一下用法和效果

.content{
  -webkit-mask-box-image: '遮罩图片' [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
}

比如有一张这样的图片

SVG代码长这样，很多工具都可以导出来，实在不会可以直接找设计同学

<svg xmlns="http://www.w3.org/2000/svg" width="60.031" height="60.031" viewBox="0 0 60.031 60.031"><path d="M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z" fill-rule="evenodd"/></svg>

这里需要转义一下，可借助张老师的 SVG在线合并工具

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
  /*这里的20表示四周保留20像素的固定区域，剩余部分平铺或者拉伸*/
}

然后就实现了这样一个形状，同样是自适应的

可以查看在线实例 codepen -webkit-mask-box-iamge 实现1

再比如有一张这样的图片

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M55.186 30.158a4.965 4.965 0 0 0 4.841 4.959V40A20.063 20.063 0 0 0 40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0v-4.888c.054 0 .1.016.158.016a4.973 4.973 0 1 0 0-9.945c-.054 0-.1.014-.158.015v-5.074h.065A20.066 20.066 0 0 0 20.131.058v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064v5.07a4.965 4.965 0 0 0-4.841 4.966z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
}

可以得到这样一个形状，两侧的半圆被拉伸了

这时只需要设置平铺方式 -webkit-mask-box-image-repeat , 这个和 border-image-repeat 是一样的概念，有以下 4 个值

-webkit-mask-box-image-repeat: stretch; /*拉伸(默认)，不会平铺*/
-webkit-mask-box-image-repeat: repeat; /*重复*/
-webkit-mask-box-image-repeat: round; /*重复，当不能整数次平铺时，根据情况拉伸。*/
-webkit-mask-box-image-repeat: space; /*重复，当不能整数次平铺时，会用空白间隙填充*/

几种平铺方式的差异如下

这里我们可以采用 round 或者 repeat

.content{
  -webkit-mask-box-image: url("...") 20;
  -webkit-mask-box-image-repeat: round;
}

可以查看在线实例 codepen -webkit-mask-box-iamge 实现2

七、总结和说明

以上一共介绍了12种绘制优惠券的案例，应该可以解决掉绝大部分这类布局的问题，这里总结以下几点

1. CSS mask 一定是这类布局最完美的实现方式
2. 需要 CSS radial-gradient 绘制图形的技巧
3. 尽可能采用 repeat 来重复相同的元素
4. 多种形状叠加时需要灵活运用 mask-composite
5. 也可以采用图片来代替CSS渐变，需要使用 mask-border

关于兼容性，其实不考虑 IE 都没有什么大问题，最后的 mask-border 目前只兼容 chrome 内核，移动端可放心使用

感谢阅读，希望能对日后的工作有所启发。

用 CSS 最困难的部分之一是处理CSS的权重值，它可以决定到底哪条规则会最终被应用，尤其是如果你想在 Bootstrap 这样的框架中覆盖其已有样式，更加显得麻烦。不过随着 CSS 层的引入，这一切都发生了变化。 这个新功能允许您创建自己的自定义 CSS 层，这是有史以来第一次确定所有 CSS 代码权重的层次结构。 在本文中，我将剖析这对您意味着什么，它是如何工作的，以及您今天如何开始使用它。

什么是层(Layers)

创建您自己的自定义图层是 CSS 的新功能，但图层从一开始就存在于 CSS 中。 CSS 中有 3 个不同的层来管理所有样式的工作方式。

浏览器（也称为用户代理）样式 - user agent style
用户样式 - User Styles
作者样式 - Author Styles

浏览器样式是应用于浏览器的默认样式。这就是为什么 Chrome 和 Safari 中的按钮看起来不同的原因。在浏览器层中找到的样式在浏览器之间是不同的，并且给每个浏览器一个独特的外观。

下一层是用户样式，这并不是您真正需要担心的事情。这些通常是用户可以编写并注入浏览器的自定义样式，但浏览器不再真正支持这些样式。用户可能会更改一些浏览器设置，这些设置会向该图层添加样式，但在大多数情况下，可以完全忽略该层。

最后，我们来到作者层。这是您最熟悉的层，因为您编写的每一段 CSS 代码都属于这一层。

这些层分开的原因是因为它可以很容易地覆盖浏览器样式和用户样式中定义的代码，因为层定义了自己的层次结构，完全忽略了权重的影响。

这 3 个 CSS 层是有序的（浏览器样式、用户样式、然后是作者样式），后面层中的每个样式都将覆盖前一层的任何样式。这意味着即使浏览器样式定义了一个超级特定的选择器，例如#button.btn.super-specific，并且您的作者样式定义了一个超级通用的选择器，例如按钮，您的作者样式仍然会覆盖浏览器样式。

这实际上已经是您可能一直在使用而没有意识到的东西。

* {
  box-sizing: border-box;
}

上面的选择器没有权重，因为 * 符号对权重没有贡献。 这意味着例如使用 p 作为选择器的 p 标签的浏览器样式在技术上比 * 选择器更具体，权重更高。 但是，这一切并不重要，因为作者样式位于比浏览器样式层晚的层中，因此您的代码将始终覆盖浏览器样式。

理解这一点至关重要，因为使用这个新的图层 API，您可以在作者图层中创建自己的图层，从而更轻松地处理特定性。

如何创建你自己的层

下面来看个例子：

很明显，这是我们正常理解的CSS， ID设置的颜色权重更高，所以按钮显示为红色。让我们使用@layer给它们加上两个层，看看是什么效果：

按钮变成蓝色。为什么会这样？

我们给两条CSS分别建立了base和utilities层，很明显，后面创建的层的样式覆盖了前面层的样式，尽管前面层的样式有更高的权重。这就是层的默认工作原理。当然层的顺序是可以指定的，

@layer utilities, base;

您需要做的就是编写@layer 关键字，后跟以逗号分隔的层列表。 这将按从左到右的顺序定义所有层，其中列出的第一层到最后一层的权重是依次增加的。 然后，您可以稍后使用普通的@layer 语法向每个层添加代码，而不必担心定义层的顺序，因为它们都在这一行中定义。 需要注意的是，这行代码必须在定义任何层之前出现，所以我通常将它作为我的 CSS 文件中的第一行。如上图，通过指定层的顺序，我们让base层应用在utilities层之后，所以按钮又显示为红色。

导入层

上面这两种方式都是导入bootstrap框架的CSS，并且把他们放在framework层中，这样你如果想要覆盖它已有的样式，只需要新建一个自己的层，放置在framework层后面就行。像下面这样。

匿名层

匿名层不常用，但它写在后面可以覆盖其他层的样式，像下面可以把按钮设为橙色。

不在层里的样式

不在层里的样式会有更高的权重，下面这个列表会让你看得更清楚覆盖是怎么发生的

层还可以重叠设置，不过很少用。具体的用法可以查阅相关文档。

浏览器支持

自从IE死了以后，所有主流浏览器都已支持这一特性。大家请放心使用。