层叠

css规则的顺序很重要，当应用两条同级别的规则到一个元素的时候，写在后面的就是实际的使用规则。

优先级

优先级是浏览器用来决定当有多个规则有不同选择器对应

h1 {
    color: red;
}

/* 实际生效的样式 */
h1 {
    color: blue;
}

层叠有三个因素需要考虑

资源顺序
后面的规则覆盖前面的规则
优先级
选择器的范围更小，优先级就会更高，优先级的的计算方法：
1. 类选择器的优先级>元素选择器
2. 一个选择器的优先级是三个不同的值相加，ID选择器（100），类选择器（10），元素选择器（1），通用选择器、组合符和调整优先级的选择器不会影响优先级
重要程度
内联样式
即style属性内的样式声明，优先于所有普通的样式
!important
覆盖上面的所有优先级计算

层叠层

创建层叠层

创建一个没有分配样式的具名层，使用@layer 声明at规则，@layer后跟一个或多个的名称来声明层
使用@layer块at规则，在块中的所有样式都添加到一个命名或者未命名的层中
使用具有layer关键字或者layer()函数的@import规则，将导入文件的内容分配到该层中

层创建和媒体查询

使用媒体或特性查询来定义层，且媒体不匹配或特征不被支持，则不会创建该层。

下面示例展示了改变设备或浏览器的尺寸可能会改变层的顺序

<style>
/* 屏幕宽度大于 50em生效 */
@media (min-width: 50em) {
  @layer site;
}

@layer page {
  h1 {
    text-decoration: overline;
    color: red;
  }
}

@layer site {
  h1 {
    text-decoration: underline;
    color: green;
  }
}
</style>

<body>
    <h1>Is this heading underlined?</h1>
</body>

使用@import 将样式表导入具体层和匿名层

@import规则允许用户直接从其他样式表导入延时规则到CSS文件或 <style> 元素中。@import 语句需要出现在最前面，或者可以在创建一个或多个层而不向这些层分配任何样式的@layer规则之后，或者在@charset规则

/* 将components-lib.css导入components层 */
@import url("components-lib.css") layer(components);
@import url("dialog.css") layer(components.dialog);
@import url("marketing.css") layer();

嵌套层

概念

具体层或匿名层中的子层，每个层叠层都可以包含嵌套层。

优点

隔离样式表。可以将第三方样式表导入到一个层中，而不用担心该样式表本身是否具有层。

创建嵌套层

在@layer规则后跟一个或多个层名称来创建。多个点和层名称表示多重嵌套。

1
2
3

@import url("components-lib.css") layer(components);
/* 将 narrowtheme.css 导入 components.narrow 层，成为最后一个层*/
@import url("narrowtheme.css") layer(components.narrow);

向命名的嵌套层添加样式，应使用点表示法：

@layer example.layout {
  main {
    width: 50vw;
  }
}

常规层叠层的优先权

层的顺序决定了他们的优先权顺序。

1
2
3

@import url(A.css) layer(firstLayer);
@import url(B.css) layer(secondLayer);
@import url(C.css);

上面的代码创建了两个具名层和一个未命名层，优先级从低到高分别为

firstLayer 普通样式（A.css）
secondLayer 普通样式（B.css）
未分层普通样式（C.css）
内联普通样式
动画样式
未分层重要样式（C.css）
secondLayer 重要样式（B.css）
firstLayer 重要样式（A.css）
内联重要样式
过渡样式

嵌套层叠层的优先权

嵌套层的层叠优先权顺序与常规层类似，但包含在层内。优先权顺序基于嵌套层创建的顺序。层中的非嵌套样式优先于嵌套的普通样式，对于重要样式则相反。嵌套层之间的优先级权重并不重要，但它在嵌套层内的冲突样式中确实很重要。

@import url("components-lib.css") layer(components);
@import url("narrowtheme.css") layer(components.narrow);

@layer components {
  :root {
    --theme: red;
    font-family: serif !important;
  }
}
@layer components.narrow {
  :root {
    --theme: blue;
    font-family: sans-serif !important;
  }
}
@layer components.wide {
  :root {
    --theme: purple;
    font-family: cursive !important;
  }
}

因为未分层普通样式优先于分层普通样式，并且在层内，非嵌套样式优先于普通嵌套样式，所以 red 优先于其他 theme 颜色。

【CSS入门】层叠

层叠

优先级

层叠层