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

Question

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

我正在从highlight.js导入样式表。它有一个名为hljs的类，该类将背景色应用于<code>元素。我想用CSS@层规则覆盖该颜色：

@import url("styles/base16/google-light.min.css") layer(highlightjs);
@layer highlightjs, main;
@layer main {
.hljs {
background: red;
}
}

这可以工作并覆盖背景色，但当我反转层的顺序时，我的背景色仍然适用。为什么？

@layer main, highlightjs;

Answer 1

问题是您的@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 2

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

1. 使用作用域进行重写
2. 使用！重要的只是覆盖您无法控制的内联样式

Answer 3

CSS级联层，这是一个CSS功能，允许我们定义明确包含的特定层，这样我们就可以完全控制在项目中哪些风格是优先的，而不依赖于特定性。

在CSS中，有一个层。必须说，每个与任何图形编辑合作过的人都熟悉它，但也许，它仍然让其他人无法理解。

在CSS中创建块时，我们总是清楚地设置它的参数，并将它定位在屏幕上的某个位置。因此，任何块都有两个坐标X和Y，这两个坐标确定了块在屏幕平面上的位置。但在CSS中还有第三个，空间坐标Z，它决定了块所在层的编号。

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

这将建立层顺序：

1. 非分层样式(最强大(
2. 公用设施
3. 组件
4. 框架
5. 默认值
6. 重置(功能最低(

但请记住：重要的是每个名称首次出现的顺序。因此，这将产生相同的结果：

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

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

查看此css-tricks.com/css-cascade-layers和https://www.successbeta.com/2022/10/learn-about-layers-in-css-step-by-step.html以供进一步澄清。