即使在颠倒 CSS 层的顺序后，背景颜色也会被覆盖

Question

我想使用 Chrome、Firefox、Safari 和 Edge 最新版本支持的新 CSS 级联层功能（请参阅 support table）。

我正在从 highlight.js 导入样式表。它有一个名为 hljs 的 class，它将背景颜色应用于 <code> 元素。我想用 CSS @layer rules:

覆盖那个颜色

@import url("styles/base16/google-light.min.css") layer(highlightjs);

@layer highlightjs, main;

@layer main {
  .hljs {
    background: red;
  }
}

这有效并覆盖了背景颜色，但是当我颠倒图层顺序时，我的背景颜色仍然适用。这是为什么？

@layer main, highlightjs;

Answer 1

CSS 级联层，CSS 特征允许我们定义显式包含的特异性层，这样我们就可以完全控制项目中哪些样式优先，而不依赖于特异性。

@layer reset, defaults, framework, components, utilities;

这将建立图层顺序：

un-layered 样式（最强大）
实用程序
组件
框架
默认值
重置（最弱）

但请记住：重要的是每个名字首次出现的顺序。所以这将有相同的结果：

@layer reset, defaults, framework;
@layer components, defaults, framework, reset, utilities;

层是根据层在您的代码中首次出现的顺序堆叠的

检查此 css-tricks.com/css-cascade-layers 以获得进一步的说明。

Answer 2

问题是您的 @import 提供了“highlightjs”层的第一个命名。它出现在层列表之前，因此它使其成为最低优先级层。那么两层的列表就没有效果了。

@import url("data:text/css, code { background:blue; color:yellow }") layer(highlightjs);

@layer main, highlightjs;

@layer main {
  .hljs {
    background: red;
  }
}

<code class="hljs">
  Hello World
</code>

因此，允许 @layer 列表位于 @import 之前。在下面的代码片段中，层的顺序是main，然后是highlightjs，并适当调整颜色。

@layer main, highlightjs;

@import url("data:text/css, code { background:blue; color:yellow }") layer(highlightjs);

@layer main {
  .hljs {
    background: red;
  }
}

<code class="hljs">
  Hello World
</code>

Answer 3

我认为任何超越特异性的东西都是非常非常糟糕的主意。事实上，他们正在推出像@layer 这样未经深思熟虑的功能，只是为了适应那些无法理解特定性的人，这令人难以置信。帮自己一个忙，不要使用@layer，如果你这样做，你很快就会发现自己陷入 CSS 地狱，在那里你不知道什么时候会发生什么，为什么会发生。坚持 2 条简单的规则：

使用作用域覆盖
仅使用 !important 来覆盖您无法控制的内联样式。

即使在颠倒 CSS 层的顺序后，背景颜色也会被覆盖

Background color overridden even after reversing the order of CSS layers

css

css-specificity

css-cascade

css-import

css-layer