css中使优先级下降，@layer规则使用

@layer的作用可以让 CSS 声明的优先级下降一整个级联级别

比如说我们用了一些ui的框架，但是在实际开发当中，ui的框架颜色和项目的主题颜色不对，就需要修改ui的颜色，例如原来的框架的btn按钮背景颜色是

.el-button--primary {
  background: #409EFF;
}

我们要修改成红色，就需要添加优先级去覆盖上面的css

body .el-button--primary {
  background: red;
}

但是这样就显得代码又长又罗嗦，甚至还会影响别的元素样式，所以@layer就横空出世，喜大普奔了，如果我们将ui里的css优先级降低，我们直接设置css就可以了，不用提高优先级

/*此时的@layer里的css优先级是降了一级的*/
@layer{
    .el-button--primary {
        background: #409EFF;
    }
}

然后我们直接设置css就可以了,这样就可以把ui里的css样式覆盖掉

.el-button--primary {
  background: red;
}

@layer4种语法规则

1. @layer layer-name {rules};
2. @layer layer-name;
3. @layer layer-name, layer-name, layer-name;
4. @layer {rules};

• @layer layer-name {rules}使用

<p id="text">我是要显示的内容</p>

如果size1和size2有重复的css，最后会显示size2设置的css，也就是说后面的优先级大于前面的优先级

@layer size1{
  #text{
    font-size:20px;
  }
}

@layer size2{
  #text{
    font-size:40px;
  }
}

• @layer layer-name使用
  主要是用来灵活设置 @layer 规则和其他 @layer 规则的前后优先级。
  可以把需要降低css优先级的放到@layer中，如果有多个@layer的话需要排序，就可以利用名称排序了

@layer size;
/*
 css
*/
@layer size{
  #text{
    font-size:20px;
  }
}

• @layer layer-name, layer-name, layer-name使用
  如果layer多的话，想要调整layer优先级，就可以利用名称排序了

@layer size2,size1;
@layer size1{
  #text{
    font-size:20px;
  }
}

@layer size2{
  #text{
    font-size:40px;
  }
}

如果size1和size2有重复的css，最后会显示size1设置的css，也就是说@layer size2,size1后面name的优先级大于前面name的优先级

• @layer {rules}使用
  单纯的将需要降级的css放到layer中，会降低优先级

#text{
  color:red;
}
@layer{
   #text{
     color:blue;
   }
}

整个文件都降低优先级，让整个css文件都变成layer

此时应当注意，@import "url"应该放在css的最上方，不然不起作用，可以命名，名称可以自己随意定义，如果layer多的话，想要调整layer优先级，就可以利用名称排序了

@layer lib2,lib1;
@import './lib.css' layer(lib1);
@layer lib2{
  .lib{
    padding:20px;
  }
}

也可以匿名.layer就是一个关键字了，而不是一个方法

@import './lib.css' layer

link标签引入css的使用layer

同样，支持自定义名称，也支持匿名用法。

<link rel="stylesheet" href="/index.css" layer="index">
<link rel="stylesheet" href="/index.css" layer>

嵌套layer的规则

@layer A{
  p{
    color:red;
  }
  @layer B{
    p{
      color:blue;
    }
  }
}

@layer C{
  p{
    color:orange;
  }
  @layer D{
    p{
      color:green;
    }
  }
}

嵌套layer的规则:
每多一层 @layer，则样式的优先级就下降一层，内部的 @layer 的优先级由外部的 @layer 规则决定。
所以以上的优先级是这样的: C>D>A>B

上面layer A的嵌套也可以写成这样：

@layer A{
  p{
    color:red;
  }
}
@layer A.B{
  p{
    color:blue;
  }
}