了解 CSS 中的层叠和流动样式

使用 CSS 时，基本概念之一是了解如何将样式应用于网页。 **“级联”**正是定义当同一个元素有多种样式时浏览器如何决定应用哪些 CSS 规则的机制。理解样式流和级联的工作原理不仅可以提高我们作为开发人员的技能，而且还可以帮助我们编写更干净、更高效、更易于维护的 CSS 代码。

CSS 中的 Cascade 是什么？

层叠是 CSS 用来确定将哪些样式应用到页面元素的过程。该过程遵循基于三个主要因素的某些规则和优先事项：

特异性：选择器的具体程度。

重要性：是否已应用 !important 属性。

声明顺序：规则在样式表中的位置。

级联评估这些规则以决定应该应用哪种风格。如果两个规则具有相同的特殊性级别，并且都没有使用 !important ，则浏览器将按照声明的顺序应用最靠近样式表末尾的规则。

CSS 中的样式流是指根据样式规则的特殊性和位置应用样式规则的顺序。让我们分解一下最重要的几点：

浏览器样式：所有浏览器默认应用某些样式（例如 body 元素上的边距或无序列表 ul）。这些样式首先应用，并且可以被我们的自定义 CSS 规则覆盖。

外部样式：我们在外部样式表中定义的样式，通常与 HTML 中的链接标签链接。这些样式比浏览器样式具有更高的优先级。

内联样式：这些样式通过 style 属性直接应用于 HTML。它们具有更高的特异性并且通常会覆盖外部样式表的规则。

!important 规则：使用 !important 可赋予规则最高优先级，覆盖任何其他应用的样式，而不管其特殊性如何。

**基本级联示例**

让我们想象一个元素从不同地方应用了多条规则：

**HTML**

假设我们的 CSS 中有以下规则

**CSS**

在这种情况下，文本将显示为蓝色，因为它是级联中定义的最后一个声明，并且它也具有与前一个声明相同的特殊性。

但你可能会遇到这种情况，即使特异性和级联相同，你也会看到显著的变化。

**CSS**

在这种情况下，文本将显示为绿色，因为规则 **color: green !important;** 由于使用了 **!important** 而具有最高优先级，这忽略了特殊性和级联。

正如我之前提到的，如果我们有两个具有相同特殊性但在不同位置声明的规则，则将应用样式表中较低的规则：

该段落将呈现红色，因为该规则是在确定黑色的规则之后声明的。

尽量减少使用 !important：虽然在特定情况下很有用，但过度使用 !important 会使您的 CSS 难以维护和覆盖。仅在真正需要的情况下使用它。

使用类而不是 ID：类的特殊性比 ID 低，因此可以更灵活地覆盖样式，而不会生成过于具体的 CSS。

按从一般到具体的顺序组织您的 CSS：首先定义全局样式，然后再转到更具体的规则。这遵循逻辑流程并使代码更容易理解。

对选择器进行一致地分组和排序：将影响相同元素的规则放在一起，以便更轻松地可视化级联并进行调整。

记录 !important 规则：如果您需要使用 !important，请记录原因。这将帮助您记住原因并降低代码变得混乱的风险。

有一些在线工具和浏览器扩展可让您直观地看到选择器的特殊性，并查看应用于特定元素的样式流程。例如：

Chrome DevTools：通过检查元素，您可以看到正在应用哪些 CSS 规则以及应用的顺序。

特异性计算器：特异性计算器等工具可让您计算选择器的特异性。

CSS 统计：此资源可让您查看有关 CSS 的统计信息，包括选择器的特殊性级别。

层叠和样式流是 CSS 的基本原则，但很好地理解它们可以对我们组织和管理样式的方式产生很大的影响。通过了解级联的工作原理，我们可以构建我们的 CSS，使其**更干净、更高效、更易于维护**。

现在您已经了解了级联，您将能够更好地控制 CSS 样式并避免意外覆盖！