一文了解CSS3中的新特性@layer( 三 ) _生活百科

也就是说，这里 !important 规则的优先级还是凌驾于非 !important 规则之上的。

上述 DEMO 还是比较有意思的，感兴趣的可以看看：CodePen Demo -- CSS Cascade @layer Demo
https://codepen.io/Chokcoco/pen/KKZKBRr

非 @layer 包含块 !important 与 @layer 包含块 !important到这里，你也许会以为你懂了。好，我们再来看一个 DEMO ，如果我们给非 @layer 包含块，也加上一个 !important 规则，事情就变得有趣了。
<div></div>div { width: 200px; height: 200px; background: black!important;}@layer A { div { background: blue; } @layer B { div { background: red; } }}@layer C { div { background: yellow; } @layer D { div { background: green!important; } }}仔细看上述代码，非 @layer 包含块，我们也加上了一个 !important 规则，按照上述我能描述的规则来看，非 @layer 包含块的优先级高于 @layer 包含块，那么正常而言，我们不难猜测，这里 background: black!important 的优先级应该要比 background: green!important 高，最终 <div> 应该展示黑色。
而实际上，这里最终 <div> 的颜色还是 green 。这里就又有一个非常有意思的知识点了， !important 下样式优先级的规则与非 !important 正常状态下刚好相反。
这是一个非常重要的特性，在比较正常（非 !important）规则时，越是级联（排序较后的 @layer 规则），优先级越低；反之，在比较 !important 规则时，越是级联靠后的（排序较后的 @layer 规则），优先级越高。
这个，更进一步的话，我们需要去了解 CSS Cascading 相关的知识了。
CSS Cascade 规范在 CSS @layer 之前，我们简单看一张图：

文章插图

上图表面的是在没有 CSS @layer 之前， CSS 样式申明的优先级排序，根据 CSS Cascading 4(Current Work) 标准，定义的当前规范下申明的层叠顺序优先级如下（越往下的优先级越高，下面的规则按升序排列）：

Normal user agent declarationsNormal user declarationsNormal author declarationsAnimation declarationsImportant author declarationsImportant user declarationsImportant user agent declarationsTransition declarations按照上述算法，可以得到一个样式优先级的排序，大概是这样（越往下的优先级越高，下面的规则按升序排列）：

文章插图

简单解释一下：用户代理样式：浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式页面作者样式：网页的作者可以定义文档的样式，这是最常见的样式表。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即页面主题，可以理解为页面作者样式用户样式：读者，作为浏览器的用户，可以使用自定义样式表定制使用体验，自定义用户偏好，可以理解为用户样式