层叠规则（Cascade Layers）：精准控制样式优先级

CSS 层叠规则：一场关于样式的“宫斗剧”

各位看官，咱们今天不聊风花雪月，也不谈诗词歌赋，而是要聊聊前端开发中一个看似枯燥，实则充满了戏剧性的东西——CSS 层叠规则（Cascade Layers）。

你可能觉得，“层叠”嘛，不就是样式一层压一层，后来者居上吗？听起来很简单。但如果你真的这么认为，那你就太小看 CSS 这个小妖精了。它里面的弯弯绕绕，可比后宫剧里的尔虞我诈还要精彩！

想象一下，你的页面就像一个皇宫，而各种 CSS 样式就是争奇斗艳的嫔妃们。每个人都想让自己的“美貌”（样式）得到皇帝（浏览器）的青睐，最终呈现在世人（用户）面前。但是，后宫佳丽三千，皇帝只有一个，谁能脱颖而出，就全看“宫斗”的手段了。

而这个“宫斗”的规则，就是我们今天要聊的层叠规则。它决定了哪些样式能最终生效，哪些样式只能黯然退场。

一、最初的“妃子们”：CSS 的来源

在“宫斗”开始之前，我们先来看看都有哪些“妃子”参与了进来。一般来说，CSS 样式可以来源于以下几个方面：

浏览器默认样式（User Agent Stylesheet）： 这些是浏览器自带的，就像是皇宫里那些“老资格”的妃子，地位稳固，但往往比较朴素，不够时尚。
用户样式（User Stylesheet）： 这是用户自己设置的样式，比如通过浏览器插件或者系统设置来改变网页的显示效果。这就像是皇帝宠幸的某个妃子，拥有一定的特权。
开发者样式（Author Stylesheet）： 这就是我们前端开发者写的 CSS 样式，也是“宫斗”的主力军。可以分为：
- 外部样式表（External Stylesheet）： 放在独立的 CSS 文件里，通过 <link> 标签引入。就像是从外面选秀进来的妃子，经过精心打扮，实力不容小觑。
- 内部样式表（Internal Stylesheet）： 放在 <style> 标签里。就像是宫里原本的宫女，被皇帝看上了，直接封妃，地位提升很快。
- 行内样式（Inline Styles）： 直接写在 HTML 标签的 style 属性里。就像是皇帝一时兴起，直接给某个宫女赏赐了一件华服，虽然效果立竿见影，但地位并不稳固。

二、“宫斗”的“武器”：层叠规则的要素

有了“妃子”，就该有“武器”了。层叠规则的“武器”主要有以下几个：

重要性（Importance）： 就像妃子的“家世背景”。!important 就像是“免死金牌”，能让样式拥有最高的优先级。但是，轻易不要使用 !important，滥用会导致样式难以维护，就像是后宫里仗着家世横行霸道的妃子，最终只会引来皇帝的反感。
特殊性（Specificity）： 就像妃子的“才艺”。选择器越精确，特殊性越高。比如 id 选择器比 class 选择器更精确，class 选择器比标签选择器更精确。
- id 选择器（#id）的特殊性是 100。
- class 选择器（.class）、属性选择器（[attribute]）和伪类选择器（:hover）的特殊性是 10。
- 标签选择器（h1）、伪元素选择器（::before）的特殊性是 1。
- 通用选择器（*）和继承来的样式，特殊性为 0。
特殊性的计算方式就像是“加权平均”，每个选择器的特殊性值相加，最终得到一个总值。比如：
- body #content .article p 的特殊性是 100 + 10 + 1 + 1 = 112。
- #content .article p:hover 的特殊性是 100 + 10 + 1 + 10 = 121。
特殊性越高，优先级越高。就像后宫里，既有美貌，又有才华的妃子，自然更容易得到皇帝的宠爱。
来源顺序（Source Order）： 就像妃子的“入宫时间”。如果重要性和特殊性都相同，那么后面的样式会覆盖前面的样式。这就是所谓的“后来者居上”。
- 行内样式 > 内部样式 > 外部样式 (同一文件中，顺序靠后的覆盖靠前的)
层叠顺序（Cascade Origin）： 就像妃子的“出身”。不同来源的样式，优先级也不同。
- 用户样式 > 开发者样式 > 浏览器默认样式

三、层叠顺序（Cascade Layers）: “宫斗”新规

上面说的都是传统的层叠规则，而 CSS 层叠顺序（Cascade Layers）就像是后宫的“新规”，打破了原有的平衡，给“宫斗”带来了新的变数。

它允许我们把 CSS 样式分成不同的“层”，每一层都有自己的优先级。这就好比后宫里，有些妃子被分到了不同的“宫殿”，每个宫殿都有自己的地位，最终的“圣旨”（样式）如何生效，就要看皇帝（浏览器）如何分配这些宫殿的权力了。

1. 如何创建层叠顺序（Cascade Layers）？

使用 @layer 规则来创建层叠顺序。语法如下：

@layer reset;
@layer default;
@layer utilities;

这样就创建了三个层，分别是 reset、default 和 utilities。

2. 如何使用层叠顺序（Cascade Layers）？

我们可以直接在 @layer 规则中定义样式，也可以在其他地方定义样式，然后将它们分配到不同的层。

@layer reset {
  body {
    margin: 0;
    padding: 0;
  }
}

@layer default {
  h1 {
    font-size: 2em;
  }
}

@layer utilities {
  .m-1 {
    margin: 1em;
  }
}

或者：

@layer reset, default, utilities; /* 定义层的顺序 */

body {
  @layer reset; /* 将样式分配到 reset 层 */
  margin: 0;
  padding: 0;
}

h1 {
  @layer default; /* 将样式分配到 default 层 */
  font-size: 2em;
}

.m-1 {
  @layer utilities; /* 将样式分配到 utilities 层 */
  margin: 1em;
}

3. 层叠顺序（Cascade Layers）的优先级

关键就在这里！层叠顺序的优先级由声明的顺序决定。后面声明的层，优先级更高。

比如，上面的例子中，utilities 层的优先级最高，default 层的优先级次之，reset 层的优先级最低。

这就意味着，如果同一个元素在不同的层中定义了相同的样式，那么 utilities 层的样式会覆盖 default 层和 reset 层的样式。

4. revert-layer 关键字

如果你想让某个元素的样式恢复到上一层的状态，可以使用 revert-layer 关键字。这就像是后宫里，某个妃子被皇帝降级了，她的待遇也要跟着降级。

@layer reset, default, utilities;

body {
  @layer reset;
  margin: 0;
  padding: 0;
}

h1 {
  @layer default;
  font-size: 2em;
}

.m-1 {
  @layer utilities;
  margin: 1em;
}

h1 {
  margin: revert-layer; /* 恢复到上一层（default 层）的 margin 值 */
}

四、层叠顺序（Cascade Layers）的优势

引入层叠顺序（Cascade Layers）就像是给后宫建立了一套更完善的制度，能带来以下好处：

更清晰的优先级控制： 可以明确地定义不同类型样式的优先级，避免样式冲突。比如，可以将 reset 样式放在最底层，保证基础样式的统一；将 utilities 样式放在最顶层，方便快速调整样式。
更好的代码组织： 可以将样式按照功能或模块进行分类，提高代码的可读性和可维护性。
更方便的样式覆盖： 可以轻松地覆盖某个层的样式，而不会影响其他层的样式。

五、举个“宫斗”的例子

假设我们要做一个按钮，需要考虑以下几个方面：

基础样式： 背景色、字体颜色、边框等。
主题样式： 根据不同的主题，改变按钮的颜色。
状态样式： 鼠标悬停时，改变按钮的背景色。

如果没有层叠顺序（Cascade Layers），我们可能会写出这样的 CSS：

.button {
  background-color: #fff;
  color: #000;
  border: 1px solid #ccc;
}

.button.primary {
  background-color: #007bff;
  color: #fff;
}

.button:hover {
  background-color: #0056b3;
}

这样的代码看起来很乱，优先级也不明确。如果我们需要修改主题样式，可能会遇到一些意想不到的问题。

有了层叠顺序（Cascade Layers），我们可以这样写：

@layer base, theme, utilities;

@layer base {
  .button {
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
  }
}

@layer theme {
  .button.primary {
    background-color: #007bff;
    color: #fff;
  }
}

@layer utilities {
  .button:hover {
    background-color: #0056b3;
  }
}

这样，我们就把按钮的样式分成了三层：

base 层： 定义基础样式。
theme 层： 定义主题样式。
utilities 层： 定义状态样式。

由于 utilities 层的优先级最高，所以鼠标悬停时的样式会覆盖其他层的样式。而 theme 层的优先级高于 base 层，所以主题样式会覆盖基础样式。

这样的代码结构更清晰，优先级更明确，也更容易维护。

六、总结

CSS 层叠规则就像是一场精彩的“宫斗剧”，充满了策略和技巧。而层叠顺序（Cascade Layers）的出现，则为这场“宫斗”带来了新的变数，也为我们提供了更强大的样式控制能力。

掌握了层叠规则，你就能在 CSS 的世界里游刃有余，让你的页面更加美观、易维护。

记住，不要轻易使用 !important，就像后宫里不要轻易使用“免死金牌”；要合理利用特殊性，就像后宫里要不断提升自己的“才艺”；要善用层叠顺序（Cascade Layers），就像后宫里要懂得审时度势，才能最终赢得“圣宠”。

希望这篇文章能帮助你更好地理解 CSS 层叠规则，让你在前端开发的道路上更上一层楼！

CSS 层叠规则：一场关于样式的“宫斗剧”

发表回复 取消回复

发表回复取消回复